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; - 只有表单输入才有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的元素。

将ID参数传递给函数

1 个答案: