JQuery Div的三元操作员条件

Question

我将HTML存储在变量中，并且在特定条件下将其附加到。我想使用三元条件添加active类。我给了该功能内部的条件，但是该类未在DIV中添加。

有人可以解释如何在div中使用三元条件吗？

function reusableGenerateFacilities(facilityListArray, contentHtml, listHeader, divFacilityAppend) {
  $.each(facilityListArray, function(key) {
    contentHtml = contentHtml + "<div class='contentbox locationSelected'><p class='locationtext'>" + facilityListArray[key].LocationName + "</p><a href='javascript:void(0)' class='editLocationName pull-right'>Edit</a><div class='editLocationPanel'><input type='text' class='locationTextBox' /><div class='editFacilityBtn'><a href='javascript:void(0)' class='cancelEdit'>Cancel</a><a href='javascript:void(0)' class='btn btn-primary saveLocationName pull-right'>Save</a></div></div></div>";
    if (key == facilityListArray.length - 1) {
      $("." + divFacilityAppend).append("<div class='col-lg-3 col-md-3 col-sm-3 col-xs-3 mainWrapper'><div class='listHeader'><p class='" + listHeader + "'>" + facilityListArray[key].LevelName + "</p><a href='javascript:void(0)' class='editLevelName pull-right'>Edit All</a><div class='editLocationPanel'><input type='text' class='LevelNameTextBox' /><div class='editFacilityBtn'><a href='javascript:void(0)' class='cancelEdit'>Cancel</a><a href='javascript:void(0)' class='btn btn-primary saveAllLevelNames pull-right'>Save</a></div></div></div><div class='location-wrapper'>" + contentHtml + "</div><div class='addLocation'><a href='javascript:void(0)' class='btn btn-default addLocationBtn' data-levelid=" + facilityListArray[key].Level + ">+ " + facilityListArray[key].LevelName + "</a></div></div>");
    }
    (key == 0) ? $(".contentbox").addClass('active') : $(".contentbox").removeClass('active');
    debugger
  });
}

Answer 1

而不是以下...

(key == 0) ? $(".contentbox").addClass('active') : $(".contentbox").removeClass('active');

您应该真正做.toggleClass( className, state )：

$(".contentbox").toggleClass("active", key == 0);

您还可以将自定义函数添加为第二个参数而不是三元表达式。

Answer 2

如果我正确理解您，您想在函数中附加的内容html切换类
尝试类似此代码的内容

function reusableGenerateFacilities(facilityListArray, contentHtml, listHeader, divFacilityAppend) {
  $.each(facilityListArray, function(key) {
    contentHtml = contentHtml + "<div class='contentbox locationSelected "+((key == 0) ? 'active' : '')+"'><p class='locationtext'>" + facilityListArray[key].LocationName + "</p><a href='javascript:void(0)' class='editLocationName pull-right'>Edit</a><div class='editLocationPanel'><input type='text' class='locationTextBox' /><div class='editFacilityBtn'><a href='javascript:void(0)' class='cancelEdit'>Cancel</a><a href='javascript:void(0)' class='btn btn-primary saveLocationName pull-right'>Save</a></div></div></div>";
    if (key == facilityListArray.length - 1) {
      $("." + divFacilityAppend).append("<div class='col-lg-3 col-md-3 col-sm-3 col-xs-3 mainWrapper'><div class='listHeader'><p class='" + listHeader + "'>" + facilityListArray[key].LevelName + "</p><a href='javascript:void(0)' class='editLevelName pull-right'>Edit All</a><div class='editLocationPanel'><input type='text' class='LevelNameTextBox' /><div class='editFacilityBtn'><a href='javascript:void(0)' class='cancelEdit'>Cancel</a><a href='javascript:void(0)' class='btn btn-primary saveAllLevelNames pull-right'>Save</a></div></div></div><div class='location-wrapper'>" + contentHtml + "</div><div class='addLocation'><a href='javascript:void(0)' class='btn btn-default addLocationBtn' data-levelid=" + facilityListArray[key].Level + ">+ " + facilityListArray[key].LevelName + "</a></div></div>");
    }
    (key == 0) ? $(".contentbox").addClass('active') : $(".contentbox").removeClass('active');
    debugger
  });
}

Answer 3

您可以在Div中添加类：

var addClass;
    addClass = (key == 0) ? 'active': '';
    contentHtml = contentHtml + "<div class='contentbox locationSelected "+addClass+"'><p class='locationtext'>" + facilityListArray[key].LocationName + "</p><a href='javascript:void(0)' class='editLocationName pull-right'>Edit</a><div class='editLocationPanel'><input type='text' class='locationTextBox' /><div class='editFacilityBtn'><a href='javascript:void(0)' class='cancelEdit'>Cancel</a><a href='javascript:void(0)' class='btn btn-primary saveLocationName pull-right'>Save</a></div></div></div>";