Question

我有一个带有空src的HTML img标记，当用户将鼠标悬停在包含img标记的父span上时，我使用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>

Answer 1

尝试更改
$('img').attr('src',data.user_img);
到
$("img[value='"+ id +"']").attr('src',data.user_img);

Answer 2

问题是您的网页上有重复的ID。因此，$('#key')将始终返回标识为DIV的第一个key，$('#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>

Answer 3

这是因为您要将源设置为页面上的所有图像。

$（'img'）应替换为$（'＃key'）

在您的情况下，代码应为：

$(document).ready(function(){
    $('#key').hover(function(){
        var img = this;
        var id=$('#im').attr('value');
        $.post('getjson.php',{id:id},function(data){
            $(img).attr('src',data.user_img);
        },'json');
    }); 
});

使用JSON从数据库中检索不同的id

3 个答案: