为什么要添加多个类？

Question

我试图添加一个类，它的左边框是绿色、橙色或红色，这取决于一些json。这三个类被称为容易，中等，硬。

$.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');
        }
    }); 
});

这是我收到的信：

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

在这段代码中，您要做的是选择所有的section elements，并附加当前的class。而您只是想要操作当前的jQuery object。

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

在第一个循环中，这将选择唯一的section tag。在第二个循环中，它将选择两个section tags。在第三个..。

试着用jQuery objects来思考。首先创建一个jQuery object并将其附加到现有的HTML元素中。然后插入class。您可以选择直接或稍后对其进行append。

$.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);
  }); 
});

Answer 2

因为您不是将类名添加到特定元素，而是将类名添加到每个“每个”迭代中的所有区段元素中。在循环中使用$(This).addClass(.)而不是$(‘节’).addClass ..。

Answer 3

$('section')选择DOM中当前的每个元素，因此您当前添加的元素和前面添加的所有元素。

要解决这个问题，首先可以将新创建的部分保存到变量中，然后将calss添加到该元素中。

$.each(data, function(key, value) {
  var section = $("<section>" + value.title.rendered + value.content.rendered + "</section>");
  $('.result').append(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');
  }
});