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 回答