Question

出于某种原因，我无法让jquery.each返回超过第一个对象的任何内容。

我的功能如下......

$(".product_list li").hover(function(event){
    var id = $(this).attr('id');
    console.log(id)
    function getData() {
      $.getJSON("products.json", function(data) {
        var product; 
        $.each( data.products, function(i, obj) {
          if (obj.id === id) 
            product = obj;
        var newImage = product.medium_image;
        console.log(product);
        $("img.image").replaceWith("<img class='image' src="+newImage+"/>");
        var product_description = "<p><strong>"+product.brand+"</strong>"+" "+product.desc+"<br>"+product.color+" "+product.energy_star+"</p>";
        $(product_description).prependTo($('#hero_description'));
        var features = product.features;
        $('#hero_features li').each(function (index) {
          $(this).text(features[index]);
      });
        var price = "<small class='price'>"+product.price+"</small>";
        $(price).appendTo($('.cart'));
        console.log(product.features);
        return false;
    });
    });
  }
  getData(id);
});

这是我的json文件......

{
  "products": [
    {
      "id": "product_1",
      "brand": "Whirlpool",
      "desc": "4.5 Cu. Ft. Duet Steam Front Load Washer",
      "color": "(Color: White)",
      "energy_star": "ENERGY STAR",
      "small_image": "assets/images/01_sm.jpg",
      "medium_image": "assets/images/01_md.jpg",
      "price": "$1,599.00",
      "features": [
        "ENERGY STAR qualified",
        "NSF Certified Sanitary cycles",
        "FanFresh option"
      ]
    },
    {
      "id": "product_2",
      "brand": "Whirlpool",
      "desc": "12.3 Cu. Ft. Front Load Washer",
      "color": "(Color: Lunar Silver)",
      "energy_star": "ENERGY STAR",
      "small_image": "assets/images/02_sm.jpg",
      "medium_image": "assets/images/02_md.jpg",
      "price": "$1,599.00",
      "features": [
        "6th Sense technology",
        "Oxi Dispense option",
        "Internal water heater"
      ]
    },
    {
      "id": "product_3",
      "brand": "Maytag",
      "desc": "4.5 Cu. Ft. Front Load Steam Washer (Color: Cranberry Red) ENERGY STAR",
      "small_image": "assets/images/03_sm.jpg",
      "medium_image": "assets/images/03_md.jpg",
      "price": "$1,499.00",
      "features": [
        "14 automatic cycles",
        "Clean Washer cycle with Affresh",
        "CEE Tier III qualified"
      ]
    },
    {
      "id": "product_4",
      "brand": "Electrolux",
      "desc": "4.7 Cu. Ft. Wave-TouchTM Front Load Washer (Color: Silver Sands) ENERGY STAR",
      "small_image": "assets/images/04_sm.jpg",
      "medium_image": "assets/images/04_md.jpg",
      "price": "$1,499.00",
      "features": [
        "4.5 cu. ft. stainless steel wash basket",
        "1400 RPM maximum spin speed",
        "Direct Inject wash system"
      ]
    },
    {
      "id": "product_5",
      "brand": "Maytag",
      "desc": "4.5 Cu. Ft. Front Load Washer (Color: Oxide) ENERGY STAR",
      "small_image": "assets/images/05_sm.jpg",
      "medium_image": "assets/images/05_md.jpg",
      "price": "$1,499.00",
      "features": [
        "Smooth Spin technology",
        "Quiet Wash Plus noise reduction system",
        "FanFresh option"
      ]
    },
    {
      "id": "product_6",
      "brand": "Maytag",
      "desc": "6.5 Cu. Ft. Front Load Washer (Color: White) ENERGY STAR",
      "small_image": "assets/images/06_sm.jpg",
      "medium_image": "assets/images/06_md.jpg",
      "price": "$1,599.00",
      "features": [
        "14 automatic cycles",
        "Clean Washer cycle with Affresh",
        "CEE Tier III qualified"
      ]
    }
  ]
}

我知道某处必须犯一个愚蠢的错误，但我看不到它。

Answer 1

你从函数返回false。所以每个人都停止了，请参阅http://api.jquery.com/jquery.each/

Answer 2

返回false将导致每个循环取消

Answer 3

确定。事实证明，我正在努力实现的目标是错误的。这是我最终使用的代码，

$(".product_list li").hover(function(event){
        var viewing = $(this).attr('id');
         function getData() {
            $.getJSON("products.json", function(data) {
                //console.log(data.products);
                for (i = 0; i < data.products.length; i++) {
                    if (data.products[i].id === viewing) {
                      var product = data.products[i];
                        $("img.image").replaceWith("<img class='image' src="+product.medium_image+"/>");
                        $("p.brand").replaceWith("<p class='brand'><strong>"+product.brand+"</strong>"+" "+product.desc+"<br />"+product.color+" "+product.energy_star+"</p>");
                        $("small.price").replaceWith("<small class='price'>"+product.price+"</small>");
                        var features = product.features;
                        console.log(features);
                        $('#features li').each(function (index) {
                        $(this).text(features[index]);
                         });
                        return;
                    }
                }
          });
         }
         getData(viewing);
      });

事实证明，for循环比jquerys的.each（）更容易使用。我个人缺乏理解。：）

使用jquery迭代json只返回第一个对象

3 个答案: