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

【问题标题】：Using JSON to retrieve different id from data base使用 JSON 从数据库中检索不同的 id
【发布时间】：2016-07-18 11:07:07
【问题描述】：

我有一个带有空 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>

【问题讨论】：

也发布您的 html。
发布所有 html 正文
可能是因为您使用 $('img') 选择器选择页面中的所有图像并将 src 属性应用于它...发布您的 html 以查看更多...

标签： javascript jquery html json

【解决方案1】：

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

【讨论】：

我尝试将 id 更改为 class 是您的意思吗？
是的，使用与 ID 不同的选择器。如果您不在其他地方使用#key 选择器，则可以更改为<span class="foo key">。
或者你可以使用.foo来代替！
它可以工作，一切都很好，但还有一件事我应该悬停第一个跨度 {$value.user_key} 图像应该出现但不会发生我必须在父跨度中包含类以使图像出现由于继承
当我将鼠标悬停在第一个跨度上时，我想实现这一点 {$value.user_key}

【解决方案2】：

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

【讨论】：

【解决方案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');
    }); 
});

【讨论】：