jquery - 如何将一个类分配给 jquery 按钮 var

Question

你好，我的 jquery 看起来像这样:

var autoStart = true;

jQuery(document).ready(function($) {

    $('.royalSlider').each(function() {

      var autoStart = true;
      var slider = $(this);
      var button = $('<button>pause</button>').insertAfter(slider).click(function() {

        if(autoStart) {
            $(this).html('play');
        } else {
            $(this).html('pause');
        }
        autoStart = !autoStart;

        slider.royalSlider('toggleAutoPlay');
      });

    });

我想为这段代码中的按钮分配一些 css，如何为这个按钮分配一个类？谢谢

Answer 1

#1 最简单的方法是在您的按钮定义中包含 class='class-name'。

#2 第二种最简单的方法是将 id='button-name' 添加到定义中，然后执行:

$("#button-name").addClass("class-name")

...在按钮被插入 DOM 之后。

#3 第三种/最困难的方法是不添加 class 或 id，而是从内容开始工作。你会这样做:

$("button:contains('pause')").addClass("class-name");

---

#1 绝对也是最快的。完全没有额外的处理!只需这样做:

var button = $('<button class="class-name">pause</button>') ...

---

要进一步优化，请执行以下操作:

function toggleAutostart( autoStart ) {
  if ( autoStart == undefined ) autoStart = true;

  if(autoStart) {
        $(this).html('play');
  } else {
        $(this).html('pause');
  }
  autoStart = !autoStart;

  slider.royalSlider('toggleAutoPlay');
}

jQuery(document).ready(function($) {
    $('.royalSlider').each(function() {
        $('<button class="class-name">pause</button>')
            .insertAfter( $(this) )
            .click( toggleAutostart );
    );
});