1

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

我在这里得到了我的代码：http: //jsfiddle.net/6qNAt/1/

 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

4

1 回答 1

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 来监听任何点击：

// 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/

于 2013-01-31T02:57:56.090 回答