0

我正在使用 jquery 菜单 UI。当 select 函数被触发时，一个类被添加到选定的项目中，该类用颜色突出显示它，同时取消突出显示先前的选择。在该代码中，我有一个按钮，一旦单击该按钮，我想提醒选择的文本值。问题不在于我无法提醒该值，而是如果我选择列表中的第 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>
4

1 回答 1

0

您在每次选择时将单击事件多次绑定到按钮。去掉按钮点击绑定，放到菜单功能之外。见小提琴

 $(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()
});
于 2013-04-02T17:02:58.190 回答