Question

我只是无法让此设备正确显示图像：http://codepen.io/JTBennett/pen/vxpMRJ

您可以看到每个对象实例都重复相同的图像。

JS看起来像这样：

$(document).ready(function(){

$.getJSON("http://codepen.io/JTBennett/pen/ZevNgX.js", function(data) {

        $.each(data,function(i,data){

 $('#vdResult').append('<div class="vdListing"><div class="vdListimg">'+'</div>'+'<div class="vdListinf"><div class="vdInftit"><h4>'+data.name+'</h4></div><div class="vdInfurl"><a rel="nofollow" target="_blank" href="'+data.url+'">View Site ></a></div><div class="vdInfinf"><div class="vdInfcol vL"><div class="vdItem"><div class="splitL">Country:</div><div class="splitR">'+data.country+'</div></div><div class="vdItem"><div class="splitL">Region:</div><div class="splitR">'+data.region+'</div></div><div class="vdItem"><div class="splitL">Shipping:</div><div class="splitR">'+data.shipping+'</div></div><div class="vdItem"><div class="splitL">Payments:</div><div class="splitR">'+data.payment+'</div></div></div><div class="vdInfcol vC"><div class="vdItem"><div class="splitL">New Guitars:</div><div class="splitR">'+data.newGuitars+'</div></div><div class="vdItem"><div class="splitL">Used Guitars:</div><div class="splitR">'+data.usedGuitars+'</div></div><div class="vdItem"><div class="splitL">Vintage Guitars:</div><div class="splitR">'+data.vintageGuitars+'</div></div><div class="vdItem"><div class="splitL">Location:</div><div class="splitR">'+data.shop+'</div></div></div><div class="vdInfcol vR"><div class="vdItem spec"><div class="spTit">Specialties:</div><div class="spRes">'+data.specialty+'</div></div><div class="vdItem"><div class="spTit">Website Quality:</div><div class="spRes qual">'+data.quality+'</div></div></div></div></div></div>');

            $('.vdListimg').css('background-image','url(https://www.electricherald.com/shopDir/img/' + data.image + '.jpg)');

        });


$(function(){
    $(".splitR").each(function(){
      var content = $(this).text()
          if (content == '') { 
            $(this).parent().css('color','#ccc')
            $(this).text('No')
          }
    });
    $(".spRes").each(function(){
      var content = $(this).text()
          if (content == '') { 
            $(this).parent().hide()
          }
    });
});

});

});

特别是问题在于这一行：

        $('.vdListimg').css('background-image','url(https://www.electricherald.com/shopDir/img/' + data.image + '.jpg)');

所有其他元素都是单独创建的，所以我想知道为什么这个元素尽管属于.each函数而为每个实例调用相同的字段。

任何帮助将不胜感激！

Answer 1

您正在使用 - $（＆＃39; .vdListimg＆＃39;）选择器同时更新所有背景图像。我已在您的代码中进行了更正

     $.each(data,function(i,data){  
          var i = data;
          var $div = $("<div>", {"class": "vdListing"});
          $div.html('<div class="vdListimg">'+'</div>'+'<div class="vdListinf"><div class="vdInftit"><h4>'+i.name+'</h4></div><div class="vdInfurl"><a rel="nofollow" target="_blank" href="'+data.url+'">View Site ></a></div><div class="vdInfinf"><div class="vdInfcol vL"><div class="vdItem"><div class="splitL">Country:</div><div class="splitR">'+data.country+'</div></div><div class="vdItem"><div class="splitL">Region:</div><div class="splitR">'+data.region+'</div></div><div class="vdItem"><div class="splitL">Shipping:</div><div class="splitR">'+data.shipping+'</div></div><div class="vdItem"><div class="splitL">Payments:</div><div class="splitR">'+data.payment+'</div></div></div><div class="vdInfcol vC"><div class="vdItem"><div class="splitL">New Guitars:</div><div class="splitR">'+data.newGuitars+'</div></div><div class="vdItem"><div class="splitL">Used Guitars:</div><div class="splitR">'+data.usedGuitars+'</div></div><div class="vdItem"><div class="splitL">Vintage Guitars:</div><div class="splitR">'+data.vintageGuitars+'</div></div><div class="vdItem"><div class="splitL">Location:</div><div class="splitR">'+data.shop+'</div></div></div><div class="vdInfcol vR"><div class="vdItem spec"><div class="spTit">Specialties:</div><div class="spRes">'+data.specialty+'</div></div><div class="vdItem"><div class="spTit">Website Quality:</div><div class="spRes qual">'+data.quality+'</div></div></div></div></div>');
          $div.find('.vdListimg').css('background-image','url(https://www.electricherald.com/shopDir/img/' + i.image + '.jpg)');

          $('#vdResult').append($div);



            $("input[name='newGuitars']").change(function(){
                 if($(this).is(":checked")) {
                   if(data.newGuitars != 'Yes'){}
                 $("h2").css('color','red')
                 }else{
                          $("h2").css('color','black')
                  }
      });

    });

我在这里创建了一个新的＆＃39; div＆＃39;在课堂上和＃34; vdListing＆＃34;一起飞行。然后添加了HTML。后来我用课程搜索了图像 - ＆＃34; vdListimg＆＃34;具体到那个＆＃34; div.vdListing＆＃34;并对其背景图像进行了更改如有任何问题，请告诉我

Answer 2

仅处理有问题的代码：

$.getJSON("http://codepen.io/JTBennett/pen/ZevNgX.js", function(result) {

      $.each(result, function(i, data) {

        $('#vdResult').append('<div class="vdListing"><div class="vdListimg">' + '</div>' + '<div class="vdListinf"><div class="vdInftit"><h4>' + data.name + '</h4></div><div class="vdInfurl"><a rel="nofollow" target="_blank" href="' + data.url + '">View Site ></a></div><div class="vdInfinf"><div class="vdInfcol vL"><div class="vdItem"><div class="splitL">Country:</div><div class="splitR">' + data.country + '</div></div><div class="vdItem"><div class="splitL">Region:</div><div class="splitR">' + data.region + '</div></div><div class="vdItem"><div class="splitL">Shipping:</div><div class="splitR">' + data.shipping + '</div></div><div class="vdItem"><div class="splitL">Payments:</div><div class="splitR">' + data.payment + '</div></div></div><div class="vdInfcol vC"><div class="vdItem"><div class="splitL">New Guitars:</div><div class="splitR">' + data.newGuitars + '</div></div><div class="vdItem"><div class="splitL">Used Guitars:</div><div class="splitR">' + data.usedGuitars + '</div></div><div class="vdItem"><div class="splitL">Vintage Guitars:</div><div class="splitR">' + data.vintageGuitars + '</div></div><div class="vdItem"><div class="splitL">Location:</div><div class="splitR">' + data.shop + '</div></div></div><div class="vdInfcol vR"><div class="vdItem spec"><div class="spTit">Specialties:</div><div class="spRes">' + data.specialty + '</div></div><div class="vdItem"><div class="spTit">Website Quality:</div><div class="spRes qual">' + data.quality + '</div></div></div></div></div></div>');

        $('#vdResult').find('.vdListimg').last().css('background-image', 'url(https://www.electricherald.com/shopDir/img/' + data.image + '.jpg)');

      });

请注意last()调用，它使用最后添加的类获取该项，以便CSS仅适用于该类。注意我重命名了初始data参数以删除变量阴影。

Answer 3

使用CSS类设置背景图像时，最后一张图像将应用于图像容器的所有。

一种可能的解决方案是直接使用图像，而不是背景：

<div class="vdListimg"><img src="https://www.electricherald.com/shopDir/img/' + data.image + '.jpg"></div>

CodePen

Answer 4

您应该直接在html中设置它。

<div class="vdListimg" style="background-image: url(https://www.electricherald.com/shopDir/img/' + data.image + '.jpg);">'+'</div>

jQuery JSON问题 - 在.each函数中重复图像

4 个答案: