0

嗨，我想从图像集的标题和 src 创建一个数组。然后将其附加到列表中，然后清除数组（集合中的图像更改），然后清除数组和列表。随着集合中图像的变化，一次又一次地重复它。

这是HTML：

<div id="imageholder">
  <img src="images/a001.png" title="orange"/>
  <img src="images/a002.png" title="red apple"/>
  <img src="images/a003.png" title="green apple"/>
  <img src="images/a004.png" title="red apple"/>
</div>
<ul id="list"></ul>

这是代码：

  title_array = [];
  src_array = [];
function sumarychange() {
  $("#imageholder img").each(function() {

// pushing each values into arrays
    title_array.push($(this).attr("title"));
    src_array.push($(this).attr("src"));

// i think this part will append the content in the arrays      
    var list = $('#list');
    var existing_item = $('#list_'+ title);

// removing items with the same titles      
    if (existing_item.length < 1){
    var new_item = $('<li />');
    new_item.attr('id', 'list_'+ title);
    new_item.html('<div>' + title + '</div><img src="' + src + '" />');
    list.append(new_item);
    }
  });
// i think this will set the arrays back to empty
  title_array.length = 0;
  src_array.length = 0;
}

这只是一个示例。实际上，图像有更多标签。当再次调用此函数时，我不知道如何清空列表。我现在只是学习编码，我不知道如何纠正它以使其工作。

4

1 回答 1

0

这在我看来像一个XY 问题。

从您上面的示例代码以及您之前的问题来看，我猜您正在尝试做的是根据现有元素集的属性更新条目列表，但具有重复标题的项目仅显示一次.

假设我做对了，这是一种方法：（演示：http: //jsfiddle.net/SxZhG/2/）

var $imgs = $("#imageholder"), $list = $("#list");

function summary_change() {
    // store data in tmp obj with title as key so we can easily ignore dups
    var store = {};  

    $imgs.find("img").each(function() {
        if (store.hasOwnProperty(this.title)) return; // ignore dup title
        store[this.title] = this.getAttribute("src");
    });

    $list.empty();  // empty the list
    for (var title in store) {  // add new list items
        $("<li>")
            .append($("<div>", {"text":title}))
            .append($("<img>", {"src":store[title]}))
            .appendTo($list);
    }
}

请注意，如果多个图像具有相同的标题，src则摘要结果中仅使用第一个图像的标题。如果您希望使用src找到的最后一项，只需删除该行if (store.hasOwnProperty(this.title)) return;。

于 2012-05-30T09:20:21.800 回答