1

これが単純な構文の問題であることを願っています。
1ページにたくさんのアイテムがあります。クリックすると、各アイテムのIDがjqueryに渡されます。これにより、より詳細な不透明なレイヤーが表示されます。idの値をスクリプトに取り込むのに苦労しています。

誰か助けてもらえますか？
これはフォームの一部です：

<ul class="foodmenu">
    <li class="foodmenuitems"><img src="images/classic.png" id="classic" /></li>
    <li class="foodmenuitems"><img src="images/blue.png"  id="blue"/></li>
</ul>

およびスクリプト：

$(document).ready(function() {
    $(".food-item-details").hide();
    $(".foodmenuitems").click(function() {
        $(".food-item-details").hide();
        var foodItem = $(this).value;
        $(foodItem).show('slow');
    });
    $(".close").click(function() {
        $(".food-item-details").hide('slow');
    });
});

どんなアドバイスもありがたく受けました！

4

1 に答える 1

4

おそらく必要なのはvar foodItem = '#' + this.id;、フォーム入力のみにがありvalueます。

ただし、IDは一意である必要があるため、これはまだ機能しません。ただし、データ属性を使用して簡単に修正できます。

<ul class="foodmenu">
    <li class="foodmenuitems"><img src="images/classic.png" data-item="classic" /></li>
    <li class="foodmenuitems"><img src="images/blue.png"  data-item="blue"/></li>
</ul>

$(document).ready(function() {
    $(".food-item-details").hide();
    $(".foodmenuitems").click(function() {
        $(".food-item-details").hide();
        var foodItem = $(this).data('item');
        $('#' + foodItem).show('slow');
    });
    $(".close").click(function() {
        $(".food-item-details").hide('slow');
    });
});

data-itemこのコードは、クリックするとで指定されたIDの要素を表示するようになりました。

于 2012-07-01T18:12:55.410 に答える