我在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
问题是id是随机的,所以我不能使用它们但幸运的是我可以使用data-label
来获取带有$('[data-label=image1]')
的外部div对象
¿如何在内部img中设置src?
答案 0 :(得分:0)
您可以使用以下
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;
});
答案 1 :(得分:0)
这是使用每个函数的示例:
$( "#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 ^^'
}
});
});
&#13;
img{
max-width:95px;
}
&#13;
<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>
&#13;
无论你体内有多少img,你都可以设置包含图像的元素var selects $('#yourelementid').find('img');
答案 2 :(得分:-2)
您可以使用包含的src更改整个代码。
function myFunction() {
document.getElementById("u11").innerHTML = '<img id="u23_img" class="img " src="images/image2_u23.png">';
}
}
&#13;
<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>
&#13;