使用JavaScript設置img標簽的src屬性

Question

我在html文件中有以下元素

<div id="u11" class="ax_default image" data-label="image1">
    <img id="u11_img" class="img " src="images/image1_u11.png">
</div>

<div id="u23" class="ax_default image" data-label="image2">
    <img id="u23_img" class="img " src="images/image2_u23.png">
</div>

我想為另一個將image2 src設置為image1 src元素編寫一個javascript onclick函數

問題是id是隨機的，所以我不能使用它們，但是幸運的是我可以使用data-label來獲取帶有$('[data-label=image1]')的外部div對象。

¿如何在內部img中設置src？

Answer 1

您可以使用以下內容

var image1 = document.querySelector('[data-label="image1"] img'),
    image2 = document.querySelector('[data-label="image2"] img');

document.querySelector('#button').addEventListener('click', function(){
    image2.src = image1.src;
});

Answer 2

這是使用每個函數的示例：

 $( "#change" ).click(function() { // get all image element in body var selects = $('body').find('img'); // loop throw them selects.each(function(index, el) { if(index !== selects.length - 1) { //save the img src to local variable var img1 = selects[index].getAttribute('src'); var img2 = selects[index+1].getAttribute('src'); // change the imgs src selects[index].src = img2; selects[index+1].src = img1; // and have a nice day ^^' } }); }); 

 img{ max-width:95px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="u11" class="ax_default image" data-label="image1"> <img id="u11_img" class="img " src="https://media-cdn.tripadvisor.com/media/photo-s/0e/4c/55/8d/merzouga.jpg"> </div> <div id="u23" class="ax_default image" data-label="image2"> <img id="u23_img" class="img " src="http://www.classetouriste.be/wp-content/uploads/2012/11/sahara-01.jpg"> </div> <button id="change">Change images</button> 

無論您體內有多少個img，此代碼都將起作用，或者您只需設置包含圖像的元素即可var selects $('#yourelementid').find('img');

Answer 3

您可以使用src更改整個代碼。

 function myFunction() { document.getElementById("u11").innerHTML = '<img id="u23_img" class="img " src="images/image2_u23.png">'; } } 

 <div id="u11" class="ax_default image" data-label="image1"> <img id="u11_img" class="img " src="images/image1_u11.png"> </div> <div id="u23" class="ax_default image" data-label="image2"> <img id="u23_img" class="img " src="images/image2_u23.png"> </div>