Question

我正在尝试使用带有jquery附加内容的切换按钮。附加内容使用Labelauty jQuery插件加载复选框及其正常工作。但是切换按钮无法正确加载相关的CSS。

这是我的面板的html代码，其中包括切换按钮。

<div class="col-md-6">
 <div class="panel">
   <div class="panel-body container-fluid">
   <div id="testcases" class="accordion js-accordion">
   <h4>Test<i class="fa fa-thumbs-o-down"></i> <small>CASES</small>
   <div class="toggle-wrap w-checkbox">
   <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle()">
    <label class="toggle-label w-form-label" for="Toggle-Switch">           </label>
    <div class="toggle">
    <div class="toggle-active">
    <div class="active-overlay"></div>
    <div class="top-line"></div>
    <div class="bottom-line"></div>
    </div>
    </div>
    </div>
   </h4>
  </div>
  <br>
  <button type="button" class="btn btn-info float-right" onclick="loadplan()">Add to Plan</button>
  </div>
  </div>
</div>

<!--TestPlan Panel-->
<div class="Panel">
<div class="col-md-13">
    <div class="panel">
      <div class="panel-body container-fluid">   
  
      <h4>Test<i class="fa fa-thumbs-o-down"></i> <small>PLAN</small></h4>
      <!-- Start list -->
      <ul id="testplan" class="list-group"></ul>          
      </div>
      <!-- End list -->
    </div>
  </div>
</div>

输出哪个

before jquery append

这是我要添加内容的jQuery

//Load TestCase List to Accordion
var testSuiteList;
var currentTestSuite;

function loadtestcases(testSuite, testcases) {
  currentTestSuite = testSuite;
  var testcases = testcases.split(",");
  // $("#testcases").empty();
  $("#testcases div:not(:first)").remove();
  var id = 0;
  // $("#testcases").append("<h4>Test<i class='fa fa-thumbs-o-down'></i> <small>CASES</small></h4>")
  testcases.forEach(function(entry) {
    id = id + 1;
    $("#testcases").append("<div class='accordion__item js-accordion-item'>" +
      "<div class='accordion-header js-accordion-header'>" +
      "<input type=\"checkbox\" class='to-labelauty-icon' name=\"inputLableautyNoLabeledCheckbox\" data-plugin=\"labelauty\" data-label=\"false\" id=\"labelauty-" + id + "\" value=\"" + entry + "\"> " + entry + "</div>" +
      "<div class='accordion-body js-accordion-body'>" +
      "<div class='accordion-body__contents'>" +
      "data-table" +
      "</div>" +
      "</div>" +
      "</div>" +
      "<div class='accordion__item js-accordion-item active'>" +
      "</div>")
  });

  //accordion js for appended div
  var accordion = (function() {

    var $accordion = $('.js-accordion');
    var $accordion_header = $accordion.find('.js-accordion-header');
    var $accordion_item = $('.js-accordion-item');

    // default settings 
    var settings = {
      // animation speed
      speed: 400,

      // close all other accordion items if true
      oneOpen: false
    };

    return {
      // pass configurable object literal
      init: function($settings) {
        $accordion_header.on('click', function() {
          accordion.toggle($(this));
        });

        $.extend(settings, $settings);

        // ensure only one accordion is active if oneOpen is true
        if (settings.oneOpen && $('.js-accordion-item.active').length > 1) {
          $('.js-accordion-item.active:not(:first)').removeClass('active');
        }

        // reveal the active accordion bodies
        $('.js-accordion-item.active').find('> .js-accordion-body').show();
      },
      toggle: function($this) {

        if (settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
          $this.closest('.js-accordion')
            .find('> .js-accordion-item')
            .removeClass('active')
            .find('.js-accordion-body')
            .slideUp()
        }

        // show/hide the clicked accordion item
        $this.closest('.js-accordion-item').toggleClass('active');
        $this.next().stop().slideToggle(settings.speed);
      }
    }
  })();

  $(document).ready(function() {
    accordion.init({
      speed: 300,
      oneOpen: true
    });
    $(":checkbox").labelauty({
      label: false
    });
  });
}

//Load the selected testcases on TestPlan
function loadplan() {
  currentTestSuite;
  //Map the selected testcases to an array
  var selectedtclist = [];
  $('input[class="to-labelauty-icon labelauty"]:checked').each(function() {
    selectedtclist.push(this.value);
  });

  for (var i = 0; i < selectedtclist.length; i++) {
    var tc_name = selectedtclist[i];

    var searchWord = currentTestSuite + " " + "|" + " " + tc_name;
    // see if element(s) exists that matches by checking length
    var exists = $('#testplan li:contains(' + searchWord + ')').length;

    if (!exists) {
      //Append selected testcases to TestPlan
      $("#testplan").append("<li class='list-group-item list-group-item-info'>" + currentTestSuite + " " + "|" + " " + tc_name + "</li>");
    }
  };
};

输出此

after loading jquery appended content

如何正确加载切换按钮的样式？

Answer 1

您将append()用于选择器$("#testplan")，但是我找不到HTML代码中任何元素的ID id="testplan"，因此JS找不到它，因此“ appand”。

jQuery追加不会为切换按钮加载css

1 个答案: