Question

目前，我正在输入/输入包含ID #viewed的所有文章的JSON数据。虽然JSON数据显示正在使用ID输入所有文章，但功能checkViewers()仅对第一篇文章ID #viewed正常运行。

理想情况下，checkViewers()函数应该会显示所有#viewed ID，因为当前正在显示第一篇文章ID #viewed（例如，名字姓氏和剩余人数已查看此帖子。）但是，第一篇文章中剩余的总人数不正确，因为它收集了所有重复的数据。它应该只收集一次数据并将每个文章ID的总数加起来。

这种情况的最佳解决方案是什么？我猜测checkViewers（）函数正在收集页面上的所有数据，只需要从它的父节中收集数据？

当前代码的示例：

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

然后使用更新的内容调用该函数。

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

修改：我最终将ID #viewed更改为类.viewed，因为ID应该是唯一的。但是，我仍然遇到和以前一样的问题。

在Plunker查看当前和完整的代码。

Answer 1

首先，现在您正确使用类，您不应该像这样检查类属性：

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

只需使用基本的jQuery类选择器：

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

您还应该对脚本顶部的其他3个选择器执行相同的操作。

现在主要的问题是，您没有将checkViewers中的支票限制在每个单独的项目中，因此它会全局应用。

您需要遍历每个.viewed元素并将逻辑应用于每个元素。 jQuery选择器方法接受第二个参数，该参数是在匹配中搜索的元素。正如您使用jQuery each()方法一样，您可以将this作为第二个参数传递：

  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

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

1 个答案: