Question

我正在做一个带有大量PHP，Jquery的业余爱好HTML项目。我终于完成了我的分类工作： http://www.spisbilligt.nu/。
现在，当我对列表进行排序并单击其中一个按钮时，我需要更改图片。

 var itemInfo = { // Initialise the item information
  item1: ['item1.jpg', 'Description of item 1...'],
  item2: ['item2.jpg', 'Description of item 2...'],
  ...
  };

(function() {
  ('#items a').click(function() { // When an item is selected
        var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID
        ('#info img').attr('src', itemInfo[id][0]); // Set the image
        ('#info p').text(itemInfo[id][1]); // And text
        return false; // Prevent default behaviour
     });

}）;

要看到我的意思并饿了，看看这里的蛋糕： http://www.georgetowncupcake.com/menu.html

Answer 1

我建议您将数据移至列表项目本身的data-*属性：

<!-- Storing data on the element is cleaner, and more manageable -->
<ul id="items">
    <li data-src="pie_1.png" data-desc="Desc Item 1">Item 1</li>
    <li data-src="pie_2.png" data-desc="Desc Item 2">Item 2</li>
</ul>

然后使用事件委派来监听任何点击：

// Event Delegation is more efficient than many handlers
$("#items").on("click", "li", function () {

});

最后，将数据属性值设置为信息区域中的图像和文本：

$("#items").on("click", "li", function () {
    // Get the data from the clicked list item
    var data = $(this).data();
    // Use the data for our info elements
    $("#info")
        .find("img").attr("src", data.src).end()
        .find("p").html(data.desc);
});

小提琴：http://jsfiddle.net/6qNAt/3/

通过单击排序列表更改div中的图像？

1 个答案: