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>";

JQuery Div中的三元运算符条件

3 个答案: