Question

我需要你的帮助人员！

我想知道如何从除了加载的页面之外的页面中检索变量的最佳实践。

例如，我们假设这是一个博客网站。

span标记用于拥有一个标签类，并具有内部文本，例如“Adventure”或“Culture”。

   <span class="label label-success">Adventure</span>
   <span class="label label-info">Culture</span>

这些将用于“index.html”页面上的各种博客预览。在“page2.html”上有一个侧边栏，其中显示了“冒险”和“文化”等类别。

侧栏中使用的每个标签也将使用Bootstrap徽章类来显示包含每个类别文本的跨度的博客数。

我是Jquery的新手，但我知道使用全局变量很糟糕。我已经读过其他人使用window对象来创建变量，同时保持全局范围的清洁。这是我的头脑，我读过的所有例子都没有让它看起来好像被用在了几页上。

我需要计算每个类别的出现次数，这些类别将是带有标签类的跨度的内部文本。

此号码将来自索引页。

以下是博客预览的两个示例，其中包含范围中的类别：

<section class="blog-post">
<div class="panel panel-default">
<img src="img/this_is_an_image.jpg" class="img-responsive" />
<div class="panel-body">
  <div class="blog-post-meta">
    <span class="label label-light label-danger">Adventure</span>
    <p class="blog-post-date pull-right">February 16, 2016</p>
  </div>
  <div class="blog-post-content">
    <a href="post-image.html">
      <h2 class="blog-post-title">Blog 1</h2>
    </a>
    <p>Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
    <a class="btn btn-info" href="post-image.html">Read more</a>
    <a class="blog-post-share pull-right" href="#">
      <i class="material-icons">&#xE80D;</i>
    </a>
  </div>
</div>
</div>
</section>

<section class="blog-post">
<div class="panel panel-default">
<img src="img/this_is_an_image_2.jpg" class="img-responsive" />
<div class="panel-body">
  <div class="blog-post-meta">
    <span class="label label-light label-success">Culture</span>
    <p class="blog-post-date pull-right">February 16, 2016</p>
  </div>
  <div class="blog-post-content">
    <a href="post-image.html">
      <h2 class="blog-post-title">Blog 2</h2>
    </a>
    <p>Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
    <a class="btn btn-info" href="post-image.html">Read more</a>
    <a class="blog-post-share pull-right" href="#">
      <i class="material-icons">&#xE80D;</i>
    </a>
  </div>
  </div>
  </div>
  </section>

它将在page2.html的这个侧栏的范围内使用：

   <div class="sidebar-module">
<div class="panel panel-default">
  <div class="panel-body">
    <h4>Category</h4>
    <ol class="categories list-unstyled">
      <li>
        <a class="label label-light label-primary" href="filter-category.html">Adventure</a>
        <span class="label label-light label-default pull-right">1</span>
      </li>
      <li>
        <a class="label label-light label-warning" href="filter-category.html">Food</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
      <li>
        <a class="label label-light label-info" href="filter-category.html">Culture</a>
        <span class="label label-light label-default pull-right">1</span>
      </li>
      <li>
        <a class="label label-light label-danger" href="filter-category.html">Nature</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
      <li>
        <a class="label label-light label-success" href="filter-category.html">Beach</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
      <li>
        <a class="label label-light label-inverse" href="filter-category.html">Sites</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
    </ol>
  </div>
</div>

我确信这很简单，但我正在学习所以任何外行人的教学都会很棒！提前感谢您的时间，考虑和教学意愿。

@charlietfl，我做了一些研究，还有另一个问题要问你。我可以将博客文章放到JSON格式中，并使用$ .getJSON（）来格式化它。也许类似的东西：

$.getJSON('blog.json', function(data) {
var output = '<ul>';
$.each(data, function(key, val) {
    output += '<li>' + val.blogtitle + '</li>';
});
output +='</ul>';
$('#update').append(output);
});

这是你的意思吗？所以现在我正在加载一个JSON文件，它将保存所有博客信息，它可以读入index.html并在第二页上检索，我需要计算条目，对吧？我知道这段代码还不正确。我正朝着正确的方向前进吗？

@ zer00ne - 我道歉，但也许我太苛刻了，不明白你推荐给我什么。我很感激你的帮助。感谢您的耐心等待。

此代码来自修改后的模板：

一节代表博文。一篇博文有几条信息。有一个类别指定博客的主题是什么，我希望用来计算博客的数量，也就是包含它的部分。

此行中的类别可以在这一行中找到：

<span class="label label-light label-danger">Adventure</span>

此博客有一类“冒险”。它可能是唯一值得为此目的寻找的路线。

在page2.html上我的侧边栏有这样的li：

<li>
    <!-- Here the innerHTML is "Adventure" -->
    <a class="label label-light label-primary" href="filter-category.html">Adventure</a> 
    <!-- Span below contains a hard coded "1" for innerHTML. I need the count of index.html's spans that have a class of label containing innerHTML of "Adventure" to increase the count by 1 to be placed as the innerHTML of this span on page2.html. -->
    <span class="label label-light label-default pull-right">1</span>
</li>

我完全清楚你比我更有经验。我认为这是我缺乏知识。有了破碎的代码，我很困惑到底在哪里。我想你希望我将代码的标签更改为更准确的描述。这样，脚本将工作吗？

我目前正在研究使用JSON数据而不是面对这个混乱。我认为这可能会容易得多。

到目前为止，我的示例JSON文件将如下所示：

{"blogs": [
          {
          "image":"img/blog1image.jpg",
          "category":"Adventure",
          "date":"January 1, 2011",
          "title": "First Blog's Title",
          "preview":"This is an intro for the first blog. Short and concise."
          },
          {
          "image":"img/blog2image.jpg",
          "category":"Culture",
          "date":"February 2, 2012",
          "title": "Second Blog's Title",
          "preview":"This is an intro for the second blog. Short and concise."
          },
          {
          "image":"img/blog3image.jpg",
          "category":"Culture",
          "date":"March 3, 2013",
          "title": "This is the third blog's title",
          "preview":"This is an intro for the third blog. Short and concise."
          }
]}

对于这个我是绝对新手，我仍在修补Jquery来计算这些数据。

$.ajax({
url: 'json/blogs.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data){
  var count = 0;,
  $(data.blogs).each(function(index, value){
    if("category" == "Adventure"){
      count++;
    )
}
})

这个代码在每个函数中都不正确，我相信有更好的方法。只是试图研究可能对我有帮助的所有方法/循环。

我为我必须克服的陡峭学习曲线道歉。我非常感谢您和其他成员协助我找到最佳解决方案。

Answer 1

简单的启动方法是为表示类别

的每个帖子<section>添加一个类

<section class="blog-post Culture">

然后在总显示范围内添加类似的数据属性以及cat-total等常见类

<span data-cat="Culture" class="cat-total label ...">1</span>

现在它是一个简单的循环遍历所有cat-total跨度

$('.cat-total').text(function(){
  var cat = $(this).data('cat');
  return $('.' +cat).length)// get the number of sections with this category class
})

Answer 2

在页面上使用JQuery查看各种页面并获取.size（）

自v.1.8起，

.size已弃用，并完全从v.3.0中删除。请改用.length属性。

我需要计算每个类别的出现次数，这些类别将是带有标签类的跨度的内部文本。

这非常令人困惑，您的HTML太难以理解。我冒昧地重写了HTML，所以希望其他读者能够轻松跟进。如果你想切入追逐，这里的工作演示包括2个HTML文件和一个外部CSS文件。

的 PLUNKER

的index.html


第1步 - 查找每个<section>并计算每个<article>的{{1}}个数。

<section>

的 .each() 的 .find()


第2步 - 显示每个$('.sec').each(function() { var articles = $(this).find('article'); var total = articles.length; ...
的数据

<section>

的 .text()


第3步 - 点击$(this).find('.qty').text(total);的链接后，收集每个page2.html并将其内容存储在数组中。

<output class='qty'>

的 .on() 的 .push()


第4步 - 对数组进行字符串化并将其存储在$('a').on('click', function() { var data = []; $('.qty').each(function() { var txt = $(this).text(); data.push(txt); }); ...
中

localStorage

的 localStorage.setItem() 的 JSON.stringify()
<小时/> Difference Between JSON.stringify() and JSON.parse()

Store an Array in localStorage
<小时/>

page2.html


第5步 - 获取字符串化数组并将其解析回数组。

localStorage.setItem("data", JSON.stringify(data));

的 localStorage.getItem() 的 JSON.parse()


步骤 6 - 收集var dataTxt = JSON.parse(localStorage.getItem("data"));并迭代（循环）它们。在每次迭代中，分配数组的数据，对应于每个<output class='qty'>的索引位置。

<output>

的 Forms Collection

在页面上使用JQuery查看各种页面并获取.size（）

2 个答案:

的index.html

page2.html