Question

我刚刚意识到我所谓的“解决方案”=）

的另一个问题

我的JS代码：

<script type="text/javascript">
    $(function() {
        function runEffect(){ 
            var selectedEffect = $('#slide').val();
            var options = {};
            if(selectedEffect == 'scale'){  options = {percent: 0}; }
            else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
            $("#effect1, #effect2").toggle(selectedEffect,options,500);
        };
        $("#moduleMenuBtn1, #moduleMenuBtn2").click(function() {
            runEffect();
            return false;
        });
    });
</script>

我有9个盒子，都有一个“菜单”按钮，可以向下滑动一个特定盒子的菜单（不是一次全部）。

如何更改代码以使“菜单”按钮1对“menu1”作出反应，而不是同时对所有菜单作出反应？

我的＃menuBtn1，＃menuBtn2等解决方案无效=）

Answer 1

而不是ID（就像你之前的问题一样）使用类，如下所示：

<div class="moduleMenuBtn">Menu</div>
<div class="effect">Some Content</div>

然后在您的代码中，您可以使用.next()相对地找到相应的.effect，如下所示：

$(function() {
    $(".moduleMenuBtn").click(function() {
        var selectedEffect = $('#slide').val();
        var options = {};
        if(selectedEffect == 'scale'){  options = {percent: 0}; }
        else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
        $(this).parent().next(".effect").toggle(selectedEffect,options,500);
        return false;
    });
});

这使其适用于页面中的任意数量的.moduleMenuBtn和.effect对。要查看相对查找内容的其他方法，请查看the tree traversal section of the API。

在同一页面上有许多JQuery Toggle按钮

1 个答案: