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 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 に答える