社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

jquery append不加载切换按钮的css

Dinesh • 5 年前 • 1714 次点击  

我正在尝试使用带有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

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

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/38766
 
1714 次点击  
文章 [ 1 ]  |  最新文章 5 年前
ParkerD
Reply   •   1 楼
ParkerD    6 年前

你使用 append() 对于选择器 $("#testplan") 但是我找不到那个身份证 id="testplan" 对于HTML代码中的任何元素,因此JS找不到它,因此无法对其“appand”任何内容。