使用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>

我希望为另一个元素编写javascript onclick函数，将image2的src设置为image1的src。问题在于id是随机的，所以我无法使用它们，但幸运的是我可以使用data-label通过$('[data-label=image1]')获得外部div对象。 我该如何设置内部img的src？

- user8812179

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;
});

- Gabriele Petrioli

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>

无论您在文档中有多少张图片，此代码都可以正常工作，或者您可以直接设置包含图片的元素：var selects = $('#yourelementid').find('img');

- M0ns1f

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>

- Blackmagyk

---

我无法使用id，因为它们是随机的。我的标识符是data-label。 - user8812179