Question

我的data <li>和data-author上有以下data-body类型。

点击li后，我想将data-author和data-info附加到几个div类，例如classOne和{{ 1}}。

点击classTwo并将数据传递到所需位置时，最好的方法是什么？

代码：

data-

Answer 1

只需从data-...元素中获取this属性。

$('ul').on('click', 'li', function(){
    var $this = $(this);

    var author = $this.attr("data-author");
    var body = $this.attr("data-body");

    $('div.classOne').text(author);
    $('div.classTwo').text(body);
});

请注意，即使使用较短的代码，您也可以生成列表：

var buttons = response.map(function(i) {
   return $('<li>', {
     text: i.title,
     "data-author": i.author,
     "data-body": i.body
   })
});

如果要在DOM中添加属性，请不要使用data()，因为这会将它们存储在dom元素中。否则，您可以使用它，$this.data("author")和$this.data("body")可以访问这些字段。

＆＃13;

var response = [
  { title: "Hello World!", author: "Someone", body: "Hi there!" },
  { title: "Hello Mars!", author: "Another One", body: "Greetings!" }
];

var buttons = response.map(function(i) {
   return $('<li>', {
     text: i.title,
     "data-author": i.author,
     "data-body": i.body
   })
 });

$("ul").html(buttons);
$('ul').on('click', 'li', function(){
  var $this = $(this);

  var author = $this.attr("data-author");
  var body = $this.attr("data-body");

  $('div.author').text(author);
  $('div.body').text(body);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>
<div class="author"></div>
<div class="body"></div>

＆＃13;

Answer 2

试试这个，

$('ul').on('click', 'li', function(){
    $('div.classOne').html($(this).data('author'));
    $('div.classTwo').html($(this).data('body'));
});

$('ul').on('click', 'li', function() {
  $('div.classOne').html($(this).data('author'));
  $('div.classTwo').html($(this).data('body'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li data-author="Rohan" data-body="Lorem ipsum doner inut">List 1</li>
  <li data-author="Andrew" data-body="Oh, Again Lorem ipsum doner inut">List 2</li>
</ul>
<div class="classOne"></div>
<div class="classTwo"></div>

使用jQuery将数据附加到div

2 个答案: