javascript - 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);
});