不从 JQuery object 中提取任何数据

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

So I'm trying to pull data from a class when I click on it. This involves the last few lines of my code. The data stored in my .users should give me an output of {someName: 'stringOfName"} however when I click on it I get an empty object {} . What am I doing wrong? I'm adding data to my .users and I can clearly see it being displayed holding information so am I pulling the data from this object incorrectly?

Answer 1

$(this).data('users'); would get info from a data-attribute called "users" on the clicked element. But I don't see anywhere in you code where you attach any data-attributes to any of your elements. You've added a "username" attribute, but that's not the same as a data-attribute, and it also has a different name.

Secondly, you can't use an arrow function as your "click" callback function because this will have the wrong scope. (You can read more about this elsewhere online ).

Here's a working demo:

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