从列表中选择订单项，然后使用jQuery推送到数组

Question

I want to allow users to select certain items from a list and add them into an array. 我想允许用户从列表中选择某些项目并将其添加到数组中。 I'm struggling with my with array.push(). 我在用array.push（）挣扎着。 Any ideas of what I'm doing wrong. 关于我在做什么的任何想法。

 $(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>

Here is the link to my code in Tryit Editor: http://www.w3schools.com/code/tryit.asp?filename=FBXZFMRGMUAE 这是我在Tryit编辑器中的代码的链接： http : //www.w3schools.com/code/tryit.asp? filename=FBXZFMRGMUAE

Answer 1

Your usage of $(this) is inside a click handler for a button, so it refers to the button. $（this）的用法位于按钮的单击处理程序中，因此它引用该按钮。 Maybe use $(this).closest("li") instead 也许使用$（this）.closest（“ li”）代替

Also your line to update the text of #s is not inside your click handler... Not sure if you intended that to update on each button-click? 另外，用于更新#s文本的行也不在单击处理程序内...不确定是否要在每次单击按钮时进行更新吗？

And as KD points out below, if you want all of your buttons to work you shouldn't attach the .click() handler to just one using the id #b1. 正如KD在下面指出的那样，如果您希望所有按钮都能正常工作，则不应使用ID＃b1将.click（）处理函数仅附加到一个。 You should do $("button").click( ... ) 您应该执行$（“ button”）。click（...）

Answer 2

following code should work for you as expected You have to work with class selector instead of id so you can bind all buttons to single event. 下面的代码将按预期工作，您必须使用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

I moved your SCRIPT block to the document HEAD and changed the .click to .on and its working now here: copy of your original code to test 我将您的SCRIPT块移到了文档HEAD上，并将.click更改为.on，现在可以在这里工作：复制原始代码以进行测试

// 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

Use this and get the text of the closest div 使用this并获取最接近的div的text

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

从列表中选择订单项，然后使用jQuery推送到数组

问题描述

4 个解决方案

解决方案1
2 2017-01-21 01:23:26

解决方案2
2 已采纳 2017-01-21 01:30:37

解决方案3
1 2017-01-21 01:36:35

解决方案4
1 2017-01-21 02:05:47

从列表中选择订单项，然后使用jQuery推送到数组

问题描述

4 个解决方案

解决方案1 2 2017-01-21 01:23:26

解决方案2 2 已采纳 2017-01-21 01:30:37

解决方案3 1 2017-01-21 01:36:35

解决方案4 1 2017-01-21 02:05:47

解决方案1
2 2017-01-21 01:23:26

解决方案2
2 已采纳 2017-01-21 01:30:37

解决方案3
1 2017-01-21 01:36:35

解决方案4
1 2017-01-21 02:05:47