在包含相同 ID 的元素中输入 JSON 数据 - 疑难解答

Question

目前我有 JSON 数据正在 inputted/entered 到包含 ID #viewed 的所有文章中。虽然 JSON 数据显示它被输入到所有带有 ID 的文章中，但函数 checkViewers() 仅对第一篇文章 ID #viewed.

正常运行

理想情况下，checkViewers() 函数应使所有 #viewed ID 显示为第一个文章 ID #viewed 当前出现（例如名字姓氏和已查看的剩余人数） this post.) 但是，第一篇文章中剩余的总人数是不正确的，因为它收集了所有重复的数据。它应该只收集一次数据，然后对每个文章 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 更改为 Class .viewed，因为 ID 应该是唯一的。但是，我仍然遇到和以前一样的问题。

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

Answer 1

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

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

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

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 数据 - 疑难解答

Inputting JSON Data In Element's Containing Same ID - Troubleshooting

javascript

jquery

json

function