Как присвоить класс кнопки JQuery вар

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); 
    ); 
}); 

Answer 2

$(this).addClass('classname'); 

Возможно, вы хотите, чтобы проверить наличие первого ... взгляд на ссылки: http://api.jquery.com/addclass/

Answer 3

Создать элемент the jQuery way

var btn = $('<button />' , { 
     text : 'pause', 
     'class' : 'myClass', 
     click : handleClick 
}).insertAfter(slider); 

function handleClick() { 
    $(this).html(autoStart ? 'play' : 'pause'); 
    autoStart = !autoStart; 
    slider.royalSlider('toggleAutoPlay'); 
}