Question

我想允许用户从列表中选择某些项目并将它们添加到数组中。我在使用array.push（）时遇到了困难。关于我做错的任何想法。

$(document).ready(function(){
	var a = [];
    
    $("#b1").click(function(){
       $("#l1").hide();
       a.push($("this").text());
    });
    
    $( "#s" ).text( a.join( " " ) );
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<body>
<style> span {color: red;} </style>
Array of Selected Items- <span ID="s"></span>
<ul>
	<li ID="l1"><div ID="d1"><button ID="b1">Select</button>One</div></li>
	<li><div ID="d2"><button ID="b2">Select</button>Two</div></li>
	<li><div ID="d3"><button ID="b3">Select</button>Three</div></li>
	<li><div ID="d4"><button ID="b4">Select</button>Four</div></li>
</ul>
</body>

以下是Tryit Editor中我的代码的链接： http://www.w3schools.com/code/tryit.asp?filename=FBXZFMRGMUAE

Answer 1

您对$（this）的使用是在按钮的单击处理程序中，因此它指的是按钮。也许使用$（this）.closest（“li”）代替

您更新#s文本的行也不在您的点击处理程序中...不确定您是否打算在每次点击按钮时更新？

正如K D指出的那样，如果你想让你的所有按钮都工作，你不应该只使用id＃b1将.click（）处理程序附加到一个。你应该做$（“按钮”）。点击（...）

Answer 2

以下代码应该按预期方式为您服务您必须使用class选择器而不是id，以便将所有按钮绑定到单个事件。

$(document).ready(function(){
    var a = [];

    $(".btn").click(function(){
       $(this).parent("li").hide();
       a.push($("this").text());
    });

    $( "#s" ).text( a.join( " " ) );
});


<body>
<style> span {color: red;} </style>
Array of Selected Items- <span ID="s"></span>
<ul>
    <li ID="l1"><div ID="d1"><button class="btn" ID="b1">Select</button>One</div></li>
    <li><div ID="d2"><button  class="btn" ID="b2">Select</button>Two</div></li>
    <li><div ID="d3"><button class="btn" ID="b3">Select</button>Three</div></li>
    <li><div ID="d4"><button class="btn" ID="b4">Select</button>Four</div></li>
</ul>
</body>

Answer 3

我将您的SCRIPT块移动到文档HEAD并将.click更改为.on，现在它在此工作：copy of your original code to test

// note the difference from your original .click, 
// not sure if this was a problem per se, but this is what I usually do.
$("#b1").on('click', function(){
   $("#l1").hide();
   a.push($(this).text());
   console.log(a);
});

Answer 4

使用this并获取最近的text

的div

$("button").click(function(){
       a.push($(this).closest("div").text());
       $(this).closest("li").hide();
       $( "#s" ).text( a.join(" ") );
    });

从列表中选择行项目并使用jQuery推送到数组

4 个答案: