javascript - 为什么要添加多个类？

Question

我正在尝试添加一个具有左边框的类，该类的左边框颜色为绿色、橙色或红色，具体取决于某些 json。这 3 个级别分别为简单、中等、困难。

$.getJSON("http://example.com/wp-json/wp/v2/posts", function(data){
    var fetch_info = '';
    $.each(data, function(key, value){
        $('.result').append("<section>" +  value.title.rendered + value.content.rendered + "</section>");
        if (value.acf.sick === "Easy") {
            $('section').addClass('easy');
        } 
        if (value.acf.sick === "Medium") {
            $('section').addClass('medium');
        } 
        if (value.acf.sick === "Hard") {
            $('section').addClass('hard');
        }
    }); 
});

这是我收到的 json:

acf {1} 生病:很难

生病可以分为简单、中等和困难，所以我想:

if (value.acf.sick === "Easy") {
            $('section').addClass('easy');
        } 

只会将类 easy 添加到 value.acf.sick === "Easy"的部分，但由于某种原因，我的 HTML 看起来像这样......

<section class="hard easy medium">...</section>
<section class="easy hard medium">...</section>
<section class="hard easy medium">...</section>
<section class="easy medium">...</section>
<section class="medium">...</section>
<section class="medium">...</section>

所有第一个类都是正确的，但由于某种原因它添加了多个类，我似乎不明白为什么？

Answer 1

您在这段代码中所做的就是选择所有节元素，并附加当前的类。虽然您只想操作当前的 jQuery 对象。

$('section').addClass('hard');

在第一个循环中，这将选择唯一的节标记。在第二个循环中，它将选择两个节标签。在第三个...

尝试用 jQuery 对象来思考。首先创建一个 jQuery 对象 并将其附加到现有的 HTML 元素。然后插入类。您可以选择直接附加或稍后附加。

$.getJSON('http://example.com/wp-json/wp/v2/posts', function(data){
  var fetch_info = '';

  $.each(data, function(key, value){
      // create a jQuery object and append it to a HTML element
      var section = $('<section>', {
                      text: value.title.rendered + value.content.rendered
                    }).appendTo('.result');

      // Add a class based on the JSON value
      if (value.acf.sick === 'Easy') {
          section.addClass('easy');
      } 
      else if (value.acf.sick === 'Medium') {
          section.addClass('medium');
      } 
      else if (value.acf.sick === 'Hard') {
          section.addClass('hard');
      }

      // or append it later
      // $('.result').append(section);
  }); 
});