Как перейти с одной таблицы стилей на другую с помощью jQuery?

Question

Я хочу изменить стиль страницы между двумя различными файлами .css, когда пользователь щелкает ссылку.

Когда ссылка нажата, я хочу загрузить новый стиль. При повторном нажатии я хочу, чтобы стиль по умолчанию был загружен. (Другими словами, я хочу иметь возможность переключаться между двумя различными таблицами стилей в событии щелчка).

$(function(){
   $('.default').click(function(){
      $('#link').attr('href', 'defaultStyle' );
      $('.default').addClass('new').removeClass('default');
   });

});
$(function(){
   $('.new').click(function(){
      $('#link').attr('href', 'secondStyle' );
      $('.new').addClass('default').removeClass('new');
   });
});

Приведенный выше код изменил стиль один раз, но второй блок не работает.

Как я могу это исправить? ТИА.

Answer 1

попробуй

$('.new').live('click',function(){});

http://api.jquery.com/live/

Answer 2

Вы можете легко сделать это с помощью jquery, вот пример,

$(document).ready(function(){

  $('#blue').click(function(event) {
    $('#text').css('background-color','blue');
  });

  $('#grey').click(function(event) {
    $('#text').css('background-color','grey');
  });

});
<div id="text" style="background-color:grey;" >Hello World</div>
<div id="blue" style="cursor:pointer" >blue</div>
<div id="grey" style="cursor:pointer" >grey</div>

Answer 3

Причина в том, что селектор jQuery находит элементы только с .new при первом запуске JavaScript.

Вы должны посмотреть в jQuery.live () http://api.jquery.com/live/

Answer 4

Обработчики кликов назначаются элементам, которые существуют в настоящее время. .new еще не существует, когда вы выполняете второй блок (только после нажатия .default).

Просто переключите классы:

$(function(){
   $('.default').click(function(){
      $('#link').attr('href', function(i, v) {
           return v === 'defaultStyle' ? 'secondStyle' : 'defaultStyle';
      });

      $(this).toggleClass('new').toggleClass('default');
   });
});

Answer 5

Это:

  $('.new').addClass('default').removeClass('reader');

Предполагается:

  $('.new').addClass('default').removeClass('new');

Кроме того, вы проверили firefox / fiddler / etc, чтобы увидеть, пытается ли браузер загрузить вторую таблицу стилей?