使用 jQuery 将数据附加到 div

Question

我的 <li> data-author 和 data-body.

上有以下 data 类型

单击 li 时，我想将 data-author 和 data-info 附加到几个 div 类，例如 classOne 和classTwo.

单击时获取 data- 并将数据传递到所需位置的最佳方法是什么？

代码：

$(document).ready(function() {

    var url = "assets/js/data.json",
        fetchJSON = $.getJSON(url);

    fetchJSON.done(function(response) {
        var buttons = response.map(function(i) {
            return $('<li>').html(i.title).attr({
                "data-author": i.author,
                "data-body": i.body
            })
        });
        $('ul').append(buttons);

    });

    $('ul').on('click', 'li', function(){


    });
}); //Ready function closed

Answer 1

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

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

访问这些字段

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

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

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

Appending data- to a div using jQuery

html

css

jquery