Question

我正在使用jquery菜单UI。触发选择功能时，会将一个类添加到所选项目中，并使用颜色突出显示该类，同时不突出显示上一个选择。在该代码中，我有一个按钮，我想在单击按钮后提醒选择的文本值。问题不在于我无法提醒值，而是如果我在列表中选择第3或第4个内容，则会显示前三个或第二个订单项以及已点击的订单项。我可以使用什么代码将警报值限制为仅使用添加颜色的类突出显示的选择。

<script>
              $(function(){

                $(".menu").menu({

                    select: function (event, ui) {

                     $('.selected', this).removeClass('selected');

                         // add the css class as well as get the text value of the selection

                        var selection = ui.item.addClass('selected').text();


                            $("button").click(function(){

                                alert(selection);

                           }); //closes click()

                  }// closes select function

               });// closes menu  


    });
</script>

<ul class="menu" id="menu">
                <li><a href="#" id="artStudies" class="academic"><img src="" alt="" /><h2>Academic: Art Studies</h2></a></li>
                <li><a href="#" id="Literature" class="academic"><img src="" alt="" /><h2>Academic: Literature</h2></a></li>
                <li><a href="#" id="socialSci" class="academic"><img src="" alt="" /><h2>Academic: Social Sciences</h2></a></li>
                <li><a href="#" id="physicalSci" class="academic"><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></a></li>
</ul>

Answer 1

您在每次选择时多次将点击事件绑定到按钮。删除按钮单击绑定并将其放在菜单功能之外。见fiddle

 $(function () {
   var selection ;
   $(".menu").menu({

     select: function (event, ui) {

       $('.selected', this).removeClass('selected');

       // add the css class as well as get the text value of the selection

       selection = ui.item.addClass('selected').text();

     } // closes select function

   }); // closes menu  

   $("button").on('click', function () {

     alert(selection);

   }); //closes click()
});

如何用特定的类获得特定'li'的值

1 个答案: