Как получить значение выбранного элемента?

Question

У меня есть кнопки с несколькими уровнями, так что я выбираю одну из кнопок уровня 1, и я хочу показать кнопку на следующем уровне.

Теперь я хочу получить значение кнопки, которую я выбрал с кодом JavaScript. Ниже мой код. Я приношу свой код для показа кнопок многоуровневых:

<script type="text/javascript"> 
 
var menuArray = ['0']; 
 

 
$(function() { 
 
    $('.showButton').click(function() { 
 
     //get target div to show 
 
     var targetID = $(this).attr('target'); 
 
     
 
     //hide all divs 
 
     $('.targetDiv').hide(); 
 
     
 
     //show all menu items in chain 
 
     var found = false; 
 
     
 
     //get containing div target number 
 
     var current = $(this).parent().attr('id').toString().charAt(3); 
 
     var length = menuArray.length; 
 
     
 
     //remove elements of array lower than clicked button 
 
     for(var i=0; i<length; i++) { 
 
      //check if next menu item is a button just pressed and never delete root menu (elem == 0) 
 
      if(menuArray[0] == current || menuArray[0] == 0) { 
 
\t \t \t $(this).addClass('selected').siblings().removeClass('selected'); 
 
       found = true; 
 
      } 
 
      //hide div if no longer in menu structure and remove from menuArray[0] 
 
      if(!found) { 
 
       $('#div' + menuArray[0]).hide(); 
 
       menuArray.shift(); 
 
      } 
 
     }; 
 
     
 
     //add new target to beginning of array 
 
     menuArray.unshift(targetID); 
 
     
 
     //show each element in the menu structure 
 
     menuArray.forEach(function(elem, index) { 
 
      if(index != 0) { 
 
       $('#div' + elem).show(); 
 
      } 
 
     }); 
 
     
 
     //get div of target to show sliding effect 
 
     var targetDiv = $('#div' + menuArray[0]); 
 
     
 
     //show the div as the last element on the page 
 
     targetDiv.insertAfter('#div' + menuArray[1]); 
 
     
 
     //slide out last div 
 
     targetDiv.show('slide'); 
 
\t \t 
 
    }); 
 
\t 
 
}); 
 
</script>

<div id="div0" class="buttons"> 
 
    <div class="showButton" target="1">A_Level1</div> 
 
    <div class="showButton" target="1">B_Level1</div> 
 
    <div class="showButton" target="1">C_Level1</div> 
 
</div> 
 

 
<!-- div1 Branch --> 
 
<div id="div1" class="targetDiv"> 
 
    <div class="showButton" target="6">A_Level2</div> 
 
    <div class="showButton" target="6">B_Level2</div> 
 
\t <div class="showButton" target="6">C_Level2</div> 
 
</div> 
 

 

 
<div id="div6" class="targetDiv"> 
 
    <div class="showButton" target="7">A_Level3</div> 
 
    <div class="showButton" target="8">B_Level3</div> 
 
\t <div class="showButton" target="9">C_Level3</div> 
 
</div>

Что мне делать?

Answer 1

Внутри вашей анонимной функции внутри $('.showButton').click(function() { вы можете получить доступ к значению с помощью $(this).text(); (или $(this).html();, если вам нужны какие-либо элементы html).

Смотрите следующий пример использования этого метода ::

$('.showButton').click(function(){ 
 
    $('#log').val($(this).text()); 
 
});

.showButton{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div0" class="buttons"> 
 
    <div class="showButton" target="1">A_Level1</div> 
 
    <div class="showButton" target="1">B_Level1</div> 
 
    <div class="showButton" target="1">C_Level1</div> 
 
</div> 
 

 
<!-- div1 Branch --> 
 
<div id="div1" class="targetDiv"> 
 
    <div class="showButton" target="6">A_Level2</div> 
 
    <div class="showButton" target="6">B_Level2</div> 
 
\t <div class="showButton" target="6">C_Level2</div> 
 
</div> 
 

 

 
<div id="div6" class="targetDiv"> 
 
    <div class="showButton" target="7">A_Level3</div> 
 
    <div class="showButton" target="8">B_Level3</div> 
 
\t <div class="showButton" target="9">C_Level3</div> 
 
</div> 
 
<hr> 
 
<textarea id='log'></textarea>