为什么要添加多个类？

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

只会将类轻松添加到具有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

因为您将类名不是添加到特定元素，而是添加到每个“每次”迭代的所有节元素。 在循环内使用$（this）.addClass（...）代替$（'section'）。addClass ...

Answer 2

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

Answer 3

在这种无需编写代码的情况下，您在这里所做的就是选择所有section elements ，并追加当前class 。 虽然您只想操纵当前的jQuery object 。

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

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

尝试思考jQuery objects 。 首先创建一个jQuery object ，并将其附加到现有的HTML元素上。 然后插入class 。 您可以选择直接append或以后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 4

尝试这样做以分别标识各节：

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

希望这可以帮助 ：）

Answer 5

使用DOM的一种更干净的JavaScript方法。

$.getJSON("http://example.com/wp-json/wp/v2/posts", function(data) {
    var fetch_info = '';
    var result = document.querySelector('.result');
    for (let i = 0; i < data.length; i++) {
        var section = document.createElement('section');
        section.innerHTML = data[i].title.rendered + data[i].content.rendered;
        section.className = data[i].acf.sick.toLowerCase(); // If data[i].acf.sick is always going to be from easy medium or hard
        result.appendChild(section);
    }
});