jQuery 仅点击元素数据

Question

希望有人能帮我解决这个问题

我一直在努力创建按钮，单击它会将数据添加到表单中被送走。

如此处所示：

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

脚本代码：

$( "#song-button" ).click(function() {

    var artist = $(".artist").text();
    var song = $("h3").text();

    $("#artist-field").val(artist);
    $("#song-field").val(song);
});

是否只能获取点击的 li 表单数据？

Answer 1

id 对于每个元素应该是唯一的。使用 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>

使用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);
});

Answer 2

您必须使用 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>

脚本必须这样改

$( ".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>');
});

Answer 3

ID 必须是唯一的。所以我将 'song-button' 编辑为 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>

jQuery 仅点击元素数据

jQuery only get clicked on elements data

javascript

jquery

element

click