jQuery 根据 JSON 输入更改特定 li 的类

Question

我想通过更改这些月份所在的“li”类来突出显示特定月份。 “关键月份”来自每个品牌的 JSON 输入。

我用来解决这个问题的 jQuery 是：

jQuery('.divResult table tbody tr td').each(function ($) {
      var MonthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      var Monthlist = '<ul class="wrapper"><li class="boxFalse cross">' + MonthArr.join('</li><li class="boxFalse cross">') + '</li></ul>';

      if (jQuery(this).text() == 'Key months') jQuery(this).nextAll("td").each(function ($) {       
        var SelectedMonthArr = jQuery(this).text().split(',');

        for (var i = 0; i < SelectedMonthArr.length; i++){
          var SelectedMonthArrEach = SelectedMonthArr[i];
        }

        jQuery("li", Monthlist).each (function(){
          if (jQuery(this).text() == jQuery(SelectedMonthArrEach).text()) {
            jQuery(this).removeClass('boxFalse cross').addClass('boxTrue').addClass('tick');
          }  
        });

        jQuery(this).empty().append(Monthlist);
    });
  });
});

但是，输出中未显示选定月份的修订类。

下面是完整的工作代码：

jQuery(document).ready(function($) {
  $("#selection").select2({
    width: '100%'
  });
});

jQuery(document).ready(function($) {
  var StatJSON = {
    "Samsung": {
      "Key months": "Jan,Feb,Mar"
    },
    "Apple": {
      "Key months": "Apr,May,Jun"
    },
    "Xiomi": {
      "Key months": "Jul,Aug,Sep"
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });
    $('#divResult').empty().append(PrintTable(data));

    jQuery('.divResult table tbody tr td').each(function($) {
      var MonthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      var Monthlist = '<ul class="wrapper"><li class="boxFalse cross">' + MonthArr.join('</li><li class="boxFalse cross">') + '</li></ul>';

      if (jQuery(this).text() == 'Key months') jQuery(this).nextAll("td").each(function($) {

        var SelectedMonthArr = jQuery(this).text().split(',');
        for (i = 0; i < SelectedMonthArr.length; i++) {
          var SelectedMonthArrEach = SelectedMonthArr[i];
        }

        jQuery("li", Monthlist).each(function() {
          if (jQuery(this).text() == jQuery(SelectedMonthArrEach).text()) {
            jQuery(this).removeClass('boxFalse cross').addClass('boxTrue').addClass('tick');
          }
        });
        jQuery(this).empty().append(Monthlist);

      });
    });

  });

  function PrintTable(data) {
    var html = '<table class="compTable"><thead><tr><th>';
    if (data && data.length) {
      html += '</th>';
      jQuery.each(data, function(k, v) {
        html += '<th id="myHeader" class="header2">' + v + '</th>';
      });
      html += '</tr>';
      html += '<tbody>';
      jQuery.each(StatJSON[data[0]], function(k, v) {
        html += '<tr><td>' + k + '</td>';
        jQuery.each(data, function(k2, v2) {
          html += '<td>' + StatJSON[data[k2]][k] + '</td>';
        });
        html += '</tr>';
      });
    } else {
      html += 'No results found</td></tr>';
    }
    html += '</tbody></table>';
    return html;
  }

});

.divResult {
  overflow: scroll;
  position: relative;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

.compTable tr:nth-child(even) {
  background-color: #f2f2f2;
}

.compTable tr:hover {
  background-color: #ddd;
}

table.compTable>tbody>tr:first-child>td:first-child {
  background-color: white;
  border-left: white;
  border-top: white;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
}

.myHeader {
  padding: 10px 16px;
  color: #0a0a0a;
  text-align: center;
}

.wrapper {
  display: grid;
  grid-template-columns: 20% 20% 20% 20%;
  grid-gap: 5%;
  background-color: #fff;
  color: #444;
  list-style: none;
  list-style-position: inside;
}

.boxTrue {
  background-color: rgb(115, 238, 43);
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  font-size: 80%;
}

.boxFalse {
  background-color: rgb(247, 92, 92);
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  font-size: 80%;
}

.wrapper li:before {
  position: relative;
  font-weight: bold;
  list-style-position: inside;
}

.wrapper li.tick:before {
  content: "\2713";
  color: darkgreen;
  list-style-position: inside;
}

.wrapper li.cross:before {
  content: "\2717";
  color: crimson;
  list-style-position: inside;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Options:
<select id="selection" select class="js-example-basic-multiple" multiple="multiple">
  <option value="Samsung">Samsung</option>
  <option value="Apple">Apple</option>
  <option value="Xiomi">Xiomi</option>
  <br /><br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>

Answer 1

问题在于“Monthlist”，因为 JQuery 不会更改变量的值。可以先追加，再修改。

此外，当前逻辑将仅将最后一个月设置为“SelectedMonthArrEach”。

var contex = jQuery(this).empty().append(Monthlist);

jQuery("li", contex).each(function() {
    if (jQuery(this).text() == SelectedMonthArrEach) {
        jQuery(this).removeClass('boxFalse cross').addClass('boxTrue').addClass('tick');
    }  
});

或者您也可以更改构建字符串的方式。