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

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

转载作者：行者123 更新时间：2023-12-01 06:32:46

我想允许用户从列表中选择某些项目并将它们添加到数组中。我正在与 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 编辑器中的代码的链接: http://www.w3schools.com/code/tryit.asp?filename=FBXZFMRGMUAE

最佳答案

以下代码应该可以按预期为您工作您必须使用 class 选择器而不是 id，以便可以将所有按钮绑定(bind)到单个事件。

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