jquery - 将 ID 参数传递给函数

Question

我希望这是一个简单的语法问题。
我在一个页面上有很多项目。单击时，每个项目的 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');
    });
});

非常感谢任何建议!

Answer 1

您可能想要的是 var foodItem = '#' + this.id; - 只有表单输入才有值。

但是，这仍然行不通，因为 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 的元素。