Question

$(document).ready(function(){
var $body = $('body');

var index = streams.home.length - 1;
while(index >= 0){
  var tweet = streams.home[index];
  var $tweet = $('<div class = tweet></div>');
  var $user = $('<div class = users></div>');
  var $message = $('<div class = message></div>');
  var $time = $('<div class = time></div>');
  // $tweet.text('@' + tweet.user + ': ' + tweet.message + ' ' + tweet.created_at);
  $tweet.appendTo($('.tweets'));
  $time.text(tweet.created_at + '\n').appendTo($tweet);
  $user.text('@' + tweet.user + ': ').attr('username', tweet.user).appendTo($tweet);
  $message.text(tweet.message + ' ').appendTo($tweet);
  index -= 1;
}

//see user history by clicking on name
  //click event on name element
  //hide all other users that do not have the same username attribute?
$('.tweets').on('click', '.users', () => {
  var user = $(this).data('users');
  console.log(user);
})

因此，当我单击某个类时，我正尝试从该类中提取数据。这涉及到我的代码的最后几行。存储在我的.users中的数据应该给我一个{someName: 'stringOfName"}的输出，但是当我单击它时，我得到一个空对象{}。我究竟做错了什么？我正在将数据添加到我的.users中，并且可以清楚地看到它正在显示包含信息，所以我是否从该对象中错误地提取了数据？

Answer 1

$(this).data('users');将从被单击元素上的名为“用户”的数据属性中获取信息。但是我看不到您在代码中的任何地方将任何数据属性附加到任何元素上。您已经添加了“用户名”属性，但这与数据属性不同，并且名称也不同。

其次，您不能将箭头函数用作“ click”回调函数，因为this的作用域不正确。（您可以了解有关此elsewhere online的更多信息）。

这是一个工作示例：

$(document).ready(function() {

  //some dummy data
  var streams = {
    "home": [{
      "user": "a",
      "message": "hello",
      "created_at": "Friday"
    }]
  };
  
  var index = streams.home.length - 1;
  while (index >= 0) {
    var tweet = streams.home[index];
    var $tweet = $('<div class="tweet"></div>');
    var $user = $('<div class="users"></div>');
    var $message = $('<div class="message"></div>');
    var $time = $('<div class="time"></div>');
    // $tweet.text('@' + tweet.user + ': ' + tweet.message + ' ' + tweet.created_at);
    $tweet.appendTo($('.tweets'));
    $time.text(tweet.created_at + '\n').appendTo($tweet);
    
    //create a data-attribute instead of an attribute
    $user.text('@' + tweet.user + ': ').data('username', tweet.user).appendTo($tweet);
    $message.text(tweet.message + ' ').appendTo($tweet);
    index -= 1;
  }

  //use a regular function insted of an arrow function
  $('.tweets').on('click', '.users', function() {
    var user = $(this).data('username'); //search for the correct data-attribute name
    console.log(user);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tweets"></div>

没有从JQuery对象中提取任何数据

1 个答案: