Question

我正在玩模块对象并尝试创建一种博客（它不会在现实生活中使用 - 只是我学习的东西）。当用户填写表单并提供标记时，它会检查标记是否存在于关联数组中，如果不存在，则会将其添加值= 1.如果标记已存在，则会为该值添加+1。现在我想在一边显示每个标签有多少条目，例如：

烹饪（3）运动（1）

似乎部分工作，因为当我添加另一个标签时，它会显示但仍会增加所有类别/标签的数量：

烹饪（1）运动（1）

然后

烹饪（2）运动（2）

...不仅仅是用户刚添加的那个。

var myArticles = (function () {
    var s, articles;

    return {

        settings: {
            articleList: "articles", // div with generated articles
            articleClass: "article", // class of an article
            articleIndex: 0,
            sidebar: document.getElementById("sidebar"),
            tagList: {},
            // cats: Object.keys(this.settings.tagList)
        },

        init: function() {
            // kick things off
            s = this.settings;
            articles = document.getElementById(this.settings.articleList);
        this.createArticle();
        },

        createArticle: function() {
            var div = document.createElement("div");
        var getTag = document.getElementById("tag").value;
        var getTitle = document.getElementById("title").value;

        // Add classes
        div.classList.add(this.settings.articleClass, getTag);

        // Add title / content
        var title = document.createElement("h2");
        var textNode = document.createTextNode(getTitle);
        title.appendChild(textNode);
        div.appendChild(title);

        // Add category
        div.innerHTML += "Article" + this.settings.articleIndex;
            articles.appendChild(div);
            this.settings.articleIndex +=1;
        this.updateCategories(getTag);
        },

    updateCategories: function(tag) {
         // Create header
        this.settings.sidebar.innerHTML = "<h3>Categories</h3>";

        // Create keys and count them
        if (tag in this.settings.tagList) {
        this.settings.tagList[tag] += 1;
        } else {
        this.settings.tagList[tag] = 1;
        }

        var cats = Object.keys(this.settings.tagList);

        // Create an unordered list, assign a class to it and append to div="sidebar"
        var ul = document.createElement('ul');
        ul.classList.add("ul-bare");
        this.settings.sidebar.appendChild(ul);

        // iterate over the array and append each element as li
        for (var i=0; i<cats.length; i++){
        var li=document.createElement('li');
        ul.appendChild(li);
        li.innerHTML=cats[i] + "(" + this.settings.tagList[tag] + ")";
        }
    }
    };
}());

和HTML：

 <body>
    <div id="container">
    <h1>My articles</h1>
    <div id="genArticle" class="left">
      <form id="addArt" method="post">
    <div>
          <label for="title">Title</label>
          <input type="text" id="title" class="forma" placeholder="Title" required />
    </div>
    <div>
          <label for="tag">Tag</label>
          <input type="text" id="tag" class="forma" placeholder="Tag" required />
    </div>
    <div>
          <label for="art">Article</label>
          <textarea id="art" class="forma" required /></textarea>
    </div>
    <input type="button" onclick="myArticles.init()" value="Add Art">
    <input type="reset" value="Reset Form">
    <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">
      </form>
      <div id="articles"></div>

    </div> <!-- end of genArticle -->
    <aside id="sidebar" class="right">
    </aside>
    </div> <!-- end of container -->



  <script src="js/script.js"></script>
  </body>

Answer 1

我认为这一行是错误的

li.innerHTML=cats[i] + "(" + this.settings.tagList[tag] + ")";

是this.settings.tagList[cats[i]]

不是this.settings.tagList[tag]

JavaScript - 显示数组

1 个答案: