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

反正是有只得到了李这就是点击数据的形式？

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必须是唯一的。 所以我在课堂上编辑了“歌曲按钮”

    $(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仅在元素数据上被点击

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-01-26 09:19:08

解决方案2
1 2016-01-26 09:33:52

解决方案3
0 2016-01-26 10:02:03

jQuery仅在元素数据上被点击

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-01-26 09:19:08

解决方案2 1 2016-01-26 09:33:52

解决方案3 0 2016-01-26 10:02:03

解决方案1
2 已采纳 2016-01-26 09:19:08

解决方案2
1 2016-01-26 09:33:52

解决方案3
0 2016-01-26 10:02:03