내 페이지를 jQuery로 업데이트

jQuery로 업데이트해야하는데 작동하지 않는 것 같아요. 내가 생각할 수있는 유일한 것은 doc.body.style.back 섹션이 맞지 않지만 잘 모릅니다. jQuery에 적합한 형식. 아무도 도와 줄 수 있습니까? - 당신은 당신이로 실행하려는 모든 코드를 결합 할 수 있습니다 다른 사람들이 지적으로내 페이지를 jQuery로 업데이트

$(body).css("background", "url('eaglesBig.jpg')");

이 그리고, 여러 document.ready() 기능을 필요가 없습니다

$(document).ready(function() { 
    let clicker = $('#jeffery'); 
    clicker.on('click', clickHandler); 

function clickHandler(e) { 
    document.body.style.background = 'url("jefferyBig.jpg")'; 
    } 
} 

$(document).ready(function() { 
    let clicker1 = $('#eagles'); 
    clicker1.on('click', clickHandler1); 

function clickHandler1(e) { 
    document.body.style.background = 'url("eaglesBig.jpg")'; 
    } 
} 

$(document).ready(function() { 
    let clicker2 = $('#wentz'); 
    clicker2.on('click', clickHandler2); 

function clickHandler2(e) { 
    document.body.style.background = 'url("wentzBig.jpg")'; 
    } 
} 

$(document).ready(function() { 
    let clicker3 = $('#jenkins'); 
    clicker3.on('click', clickHandler3); 

function clickHandler3(e) { 
    document.body.style.background = 'url("jenkinsBig.jpg")'; 
    } 
} 

$(document).ready(function() { 
    let clicker4 = $('#cox'); 
    clicker4.on('click', clickHandler4); 

function clickHandler4(e) { 
    document.body.style.background = 'url("coxBig.jpg")'; 
    } 
}

출처

2017-11-08 Josh

backgroound –

에 이미지를 추가하려면 여러 개의 .ready() 기능을 사용하지 않아야합니다. 하나만 넣으면됩니다. – Cruiser

@Cruiser 더 조직적이지만 여러 .ready() 함수에는 본질적으로 잘못된 것이 없습니다. –

당신은 .css() 방법을 사용 곧 DOM이 하나의 .ready() 함수로 준비된다. 또한 현재 코드에 필요한 모든 } 구문이 없으므로이 코드도 확인하십시오. 여기

출처

2017-11-08 17:08:11

는 작업 예를

$(document).ready(function() { 
 
     $('body').css('background-image', 'url(https://www.w3schools.com/html/pulpitrock.jpg)'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

출처

2017-11-08 17:11:02

당신은 배경 이미지를 업데이트 할 css() 방법을 사용할 수 있습니다. 또한 클릭 할 요소의 data-* 속성에 이미지 src를 놓아 DRY 코드를 만들 수 있습니다. 그럼 당신은 클래스와 그룹 필요한 모든 요소 수 및 단일 이벤트 핸들러가이 방법의

$(document).ready(function() { 
    $('.bg-trigger').click(function() { 
    $('body').css('background-image', `url("${$(this).data('src')}")`); 
    }); 
});

<div class="bg-trigger" data-src="jefferyBig.jpg">Jeffery</div> 
<div class="bg-trigger" data-src="eaglesBig.jpg">Eagles</div> 
<div class="bg-trigger" data-src="wentzBig.jpg">Wentz</div> 
<div class="bg-trigger" data-src="jenkinsBig.jpg">Jenkins</div> 
<div class="bg-trigger" data-src="coxBig.jpg">Cox</div>

장점은 JS 코드가 단순화되어 있으며, 또한 터치 할 필요없이 무한 확장의를 JS 코드. 옵션을 추가하려면 적절한 class 및 data 속성을 사용하여 새 HTML 요소를 만듭니다.

출처

2017-11-08 17:15:40

내 페이지를 jQuery로 업데이트

답변

관련 문제