如何獲得特定'li'與特定類的價值

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() 
});