我有一个带有空src的HTML img标签，当用户将鼠标悬停在包含img标签的父跨度上时，我使用JSON和jquery从数据库中检索img的src。问题是，当我使用JSON检索src时，一切都很好，并且检索了图像src，但是我在同一页面中为此范围设置了一个循环，因此当已经检索到第一个图像时，它将src应用于另一个循环的范围图片。就像为其他不同的循环图像检索第一张图像的相同ID，这些其他循环图像假定对不同的内容图像内容具有不同的ID。
这是我的代码：
$(document).ready(function(){
$('#key').hover(function(){
var id=$('#im').attr('value');
$.post('getjson.php',{id:id},function(data){
$('img').attr('src',data.user_img);
},'json');
});
});
这是HTML
{loop="data"} <span class="foo" id="key">{$value.user_key}</span> <span class="foo">
<img alt="ther is an image here" src="" value="{$value.id}" id="im"/></span>
问题是您的页面上有重复的ID。因此，$('#key')总是会返回第一个DIVIDkey为的ID ，与相同$('#im')。相反，$('img')它将选择页面上的所有图像。这是演示此问题的演示：
console.log("$('#key') count:"+$('#key').length);
console.log("$('#img') count:"+$('#key').length);
console.log("$('img') count:"+$('img').length);
$('#key').hover(function(){
console.log("ID hovered: "+$('#im').attr('value'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="key"> Div 1
<img src="" id="im" value="1" />
</div>
<div id="key"> Div 2
<img src="" id="im" value="2" />
</div>
<div id="key"> Div 3
<img src="" id="im" value="3" />
</div>
<div id="key"> Div 4
<img src="" id="im" value="4" />
</div>为了解决您需要使用另一个选择器的问题，例如，使用一个类：
$(document).ready(function(){
$('.my-selector').hover(function(){
//This will select all images inside 'this' (hovered .key)
var img = $('img', this);
$.post('getjson.php',{id : img.attr('value')},function(data){
img.attr('src',data.user_img);
},'json');
});
});
HTML：
{loop="data"} <div class="my-selector"> <!-- add parent div -->
<span class="foo" id="key">{$value.user_key}</span>
<span class="foo">
<img alt="ther is an image here" src="" value="{$value.id}" id="im"/>
</span>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句