0

jquery メニュー UI を使用しています。select 関数がトリガーされると、選択されたアイテムにクラスが追加され、色で強調表示され、以前の選択は強調表示されなくなります。そのコード内には、ボタンがクリックされたときに選択範囲のテキスト値を警告するボタンがあります。問題は、値をアラートできないことではなく、リストの 3 番目または 4 番目のものを選択すると、クリックされたものだけでなく、前の 3 番目または 2 番目の項目にもアラート ボックスが表示されることです。 . 色を追加するクラスで強調表示されている選択のみにアラート値を制限するために使用できるコードは何ですか?

<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 に答える