[英]jQuery only get clicked on elements data
I hope someone can help me with this issue 我希望有人可以帮助我解决这个问题
I've been working on creating buttons that when clicked it adds the data to a form to be sent off. 我一直在创建按钮,单击这些按钮会将数据添加到要发送的表单中。
As seen here: 如此处所示:
<div>
<li id="song-button">
<h3 class="song">Song #1</h3>
<div class="artist">Artist #1</div>
</li>
<li id="song-button">
<h3 class="song">Song #2</h3>
<div class="artist">Artist #2</div>
</li>
</div>
<form>
<input type="hidden" name="title" value="">
<table width="100%" border="0">
<tbody>
<tr>
<td align="left">
<label>Artist: </label>
</td>
................
Script Code: 脚本代码:
$( "#song-button" ).click(function() {
var artist = $(".artist").text();
var song = $("h3").text();
$("#artist-field").val(artist);
$("#song-field").val(song);
});
Is there anyway to only get the li thats clicked on's data for the form? 反正是有只得到了李这就是点击数据的形式?
id
should be unique for each element. 每个元素的
id
均应唯一。 Use song-button
class
instead of id
like following. 使用
song-button
class
代替如下所示的id
。
<div>
<li class="song-button">
<h3 class="song">Song #1</h3>
<div class="artist">Artist #1</div>
</li>
<li class="song-button">
<h3 class="song">Song #2</h3>
<div class="artist">Artist #2</div>
</li>
</div>
Use find
to get data under clicked element. 使用
find
来获取单击元素下的数据。
$( ".song-button" ).click(function() {
var artist = $(this).find(".artist").text();
var song = $(this).find("h3").text();
$("#artist-field").val(artist);
$("#song-field").val(song);
});
you must change your selector with class , id is unique so i've changed your code a little ... 您必须使用class更改选择器,id是唯一的,所以我对您的代码做了一些更改...
<div>
<li class="song-button">
<h3 class="song">Song #1</h3>
<div class="artist">Artist #1</div>
</li>
<li class="song-button">
<h3 class="song">Song #2</h3>
<div class="artist">Artist #2</div>
</li>
</div>
<form>
<input type="hidden" name="title" value="">
<table width="100%" border="0">
<tbody>
<tr>
<td align="left">
<label>Artist: </label>
</td>
</tr>
</tbody>
</table>
</form>
and the script must changed like this 并且脚本必须像这样更改
$( ".song-button" ).click(function() {
var artist = $(this).find('.artist').text();
var song = $(this).find('.song').text();
$("tbody tr").append('<td align="left"><label>Artist:'+artist+' </label></td>');
});
Id must be unique. ID必须是唯一的。 So me edited 'song-button' as class
所以我在课堂上编辑了“歌曲按钮”
$(document).ready(function () {
$(".song-button").click(function () {
var artist = $(this).find('div.artist').text()
var song = $(this).find('h3.song').text()
alert(artist)
alert(song)
});
});
</script>
</head>
<body>
song-button
<div>
<li class="song-button">
<h3 class="song">Song #1</h3>
<div class="artist">Artist #1</div>
</li>
<li class="song-button">
<h3 class="song">Song #2</h3>
<div class="artist">Artist #2</div>
</li>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.