在包含相同ID的元素中输入JSON数据-故障排除

Question

Currently I have JSON data that is being inputted/entered into all articles containing the ID #viewed . While the JSON data is showing that it is being inputted into all article's with the ID, the function checkViewers() is only functioning correctly for the first article ID #viewed .

Ideally, the checkViewers() function should make all #viewed IDs appear as the first article ID #viewed is currently appearing (eg First name Last name and Remaining Number of People have viewed this post.) However, the total number of people remaining is incorrect in the first article, as it is gathering all the repeated data. It should only be gathering the data once and totaling that number per article ID.

What is the best fix for this situation? I am guessing the checkViewers() function is gathering all the data on the page and only needs to be gathering the data from it's parent section?

A sample of the current code:

  //Content Viewer Information
  function checkViewers() {
    //Base Variables
    //var viewer = $('#viewed span.user');
    //var totalViews = $('#viewed span.user').length;
    //var shortenViews = $('#viewed span.user').length -1;
    var viewer = $("#viewed span[class^='user']");
    var totalViews = $("#viewed span[class^='user']").length;
    var shortenViews = $("#viewed span[class^='user']").length -1;

    if (totalViews === 0) {
      ($('#viewed').html('<span> 0 people have viewed your post.</span>'));
    }
    if (totalViews === 1) {
      $('<span> has viewed your post.</span>').insertAfter(viewer.last());
    }
    if (totalViews === 2) {
      $('<span> and </span>').insertAfter(viewer.first());
      $('<span> have viewed your post.</span>').insertAfter(viewer.last());
    }
    if (totalViews >= 3) {
      viewer.slice(1).hide();
      $('<span> and </span>').insertAfter(viewer.first());
      $('<span class="user count"></span>').insertAfter(viewer.eq(2));
      $('.count').html(shortenViews + ' more people');
      $('<span> have viewed your post.</span>').insertAfter(viewer.last());
    }
  }

The function is then being called with the updated content.

  //Update Page With New Content
  var viewerSection = $("article[id^='viewed']");
  viewerSection.html(newViewers);
  checkViewers();

Edits: I ended up changing the IDs #viewed to the Class .viewed , as IDs should be unique. However, I am still having the same problem as before.

View the current and complete code at Plunker .

Answer 1

Firstly, now you are correctly using classes, you shouldn't check the class attribute like this:

var viewerSection = $("div[class^='viewed']");

Just use the basic jQuery class selector:

var viewerSection = $("div.viewed");

You should also do the same for the other 3 selectors at the top of your script as you have commented out.

---

Now the main problem is that you are not restricting your checks in checkViewers to each individual item, so it is applying it globally.

You need to loop through each .viewed element and apply your logic to each. The jQuery selector method takes a second argument which is an element to search within for matches. As you are in a jQuery each() method, you can just pass this as the second argument:

  function checkViewers() {
    $('div.viewed').each(function() {
      var viewer = $("span.user", this);
      // no need to re-select, just work them out based on viewer
      var totalViews = viewer.length;
      var shortenViews = viewer.length -1;

      if (totalViews === 0) {
        $(this).html('<span>0 people have viewed your post.</span>');
      }
      else if (totalViews === 1) {
          $(this).append('<span> has viewed your post.</span>');
      }
      else if (totalViews === 2) {
        $('<span> and </span>').insertAfter(viewer.eq(0));
        $(this).append($('<span> have viewed your post.</span>'));
      }
      else if (totalViews >= 3) {
        viewer.slice(1).hide();
        $('<span> and </span>').insertAfter(viewer.eq(0));
        $('<span class="user count">' + shortenViews + ' more people</span>').insertAfter(viewer.eq(2));
        $(this).append($('<span> have viewed your post.</span>'));
      }
    });
  }

Updated Plunker