如何获得所选元素的价值？

I have multi level buttons such that I select one of button in level 1 and I want to show button in next level.

我有多级按钮,我选择1级按钮之一,我想在下一级显示按钮。

Now, I want to get value of button that I selected with JavaScript code. Below is my code. I bring my code for show multi level buttons:

现在,我希望获得我使用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) {
			$(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');
		
    });
	 
});
</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>
	<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>
	<div class="showButton" target="9">C_Level3</div>
</div>

What shall I do?

我该怎么办?

1 个解决方案

#1

Inside your anonymous function, inside $('.showButton').click(function () { you can access the value with $(this).text(); (or $(this).html(); if you need any html elements with it).

在你的匿名函数里面,在$('。showButton')里面。单击(function(){你可以用$(this).text();(或$(this).html();如果你需要的话)与它的HTML元素)。

See the following example using this method::

使用此方法请参阅以下示例::

$('.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>
	<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>
	<div class="showButton" target="9">C_Level3</div>
</div>
<hr>
<textarea id='log'></textarea>

#1