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或以后使用它。

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

为什么要添加多个类？

5 个答案: