Вопросы Теги

как использовать другую тему css, основанную на переключении кнопки переключения [duplicate]

== сравнивает ссылки на объекты в Java и не является исключением для объектов String.

Для сравнения фактического содержимого объектов (в том числе String) необходимо использовать equals.

Если сравнение двух объектов String с использованием == оказывается true, это связано с тем, что объекты String были интернированы, а виртуальная машина Java имеет несколько ссылки указывают на тот же экземпляр String. Не следует ожидать сравнения одного объекта String, содержащего то же содержимое, что и другой объект String, используя == для оценки как true.

8
задан Rory McCrossan 12 December 2017 в 13:11
поделиться

6 ответов

Это альтернативное решение для рассмотрения, если по какой-либо причине решение Рори не может быть применено. Идеально просто переключить класс body и использовать этот класс в качестве базового селектора . Недавно я применил этот метод для переключения приложения между темной и легкой темой, а затем сохранил его до localStorage, так что изменения «запоминаются», например: 

<style>
    .nocturnal-theme p {
       background: black;
       color: white;
    }

    .diurnal-theme p {
       background: white;
       color: black;
    }
</style>

<script>
/* Toggle Theme */
jQuery('.toggle-theme').on('click', function(){
    if(jQuery(this).hasClass('toggle-diurnal')) {
        jQuery('body').removeClass('diurnal-theme').addClass('nocturnal-theme');
        localStorage.setItem('theme','nocturnal-theme');
    } else if(jQuery(this).hasClass('toggle-nocturnal')) {
        jQuery('body').removeClass('nocturnal-theme').addClass('diurnal-theme');
        localStorage.setItem('theme','diurnal-theme');
    }
    var themeSet = localStorage.getItem('theme');
});
</script>

Сводка

  1. В приведенном ниже решении хранятся пути относительные пути (типичные для стандартных Wordpress) к переменным (у вас могут не всегда быть уникальные идентификаторы (значения атрибутов id), которые можно использовать, а так как редактирование основных файлов, включив их, не считается хорошей практикой (по причинам, которые здесь не будут затронуты) ), возможно, лучше сохранить эти файлы в переменных);
  2. В .click() из '#css_toggle' метод .each() используется для прокрутки всех экземпляров таблиц стилей (из которых, скорее всего, будет несколько), это также позволяет нам переопределить область действия $(this), которая будет полезна для продвижения вперед;
  3. Через каждую итерацию цикла link в настоящее время в области имеет свой href attribut e хранится в переменной;
  4. Сохраненное значение этого атрибута затем сравнивается с относительными файловыми путями , которые мы сохраняли ранее в переменных
  5. . Если они найдены содержат эти сохраненные значения, соответствующим образом обновляется атрибут href соответствующего элемента link.

Демонстрация фрагмента кода: 

var defaultSS = '/wp-content/themes/RIP/assets/css/style.css',
    altSS = '/wp-content/themes/RIP/assets/css/style1.css',
    hrefAttr;

$('#css_toggle').click(function () {

  $('link').each(function(){
    hrefAttr = $(this).attr('href');
    if (hrefAttr.indexOf(defaultSS) >= 0) {
      $(this).attr('href', altSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    } else if (hrefAttr.indexOf(altSS) >= 0) {
      $(this).attr('href', defaultSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css" type="text/css" media="all">

<button id="css_toggle" title="I'm a tooltip!">Text</button>

6
ответ дан UncaughtTypeError 16 August 2018 в 11:13
поделиться
  • 1
    Спасибо за подробный ответ. Я ценю время, которое вы приняли, чтобы объяснить свой подход – danjbh 12 December 2017 в 15:10
  • 2
    @danjbh Спасибо за отзыв - всегда хорошо знать. – UncaughtTypeError 12 December 2017 в 15:13

Вместо длинного href используйте link[href*="style.css"], чтобы найти style.css 

var click = false;
var path = '/rip-access/wp-content/themes/RIP/assets/css/';

$('#css_toggle').on('click', function() {
  if (!click) {
    $('link[href*="style.css"]').attr('href', path + 'style1.css');
    click = true;
    console.log('changed to style1.css');
  } else {
    $('link[href*="style1.css"]').attr('href', path + 'style.css');
    click = false;
    console.log('changed to style.css');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="css_toggle" title="I'm a tooltip!">Toggle</button>
<link href="/rip-access/wp-content/themes/RIP/assets/css/style.css" rel="stylesheet" />

А также вы можете использовать ID вместо выбора по имени файла. 

$('#css') // jquery selector

<link id="css" href="..." rel="stylesheet" /> // html
2
ответ дан Pedram 16 August 2018 в 11:13
поделиться
  • 1
    Единственная проблема, которую я вижу в этом, заключается в том, что в строке может быть несколько элементов link с экземпляром style.css в строке (так как это сайт wordpress, будет обслуживаться несколько таблиц стилей из разных плагинов). – UncaughtTypeError 12 December 2017 в 13:07
  • 2
    @UncaughtTypeError Согласен, и я рекомендовал вместо этого использовать ID. – Pedram 12 December 2017 в 13:14

Лучшим и более надежным решением было бы использовать единую таблицу стилей и чередовать стиль, заставляя правила зависеть от класса на body. Затем вы можете просто переключать этот класс, когда это необходимо, например: 

$('#css_toggle').click(function() {
  $('body').toggleClass('default highlight');
});
body.default .sq {
  border: 1px solid #C00;
}   

body.highlight .sq {
  background-color: #CC0;
  border: 2px dotted #C00;
}

.sq {
  margin: 10px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="default">
  <button id="css_toggle" title="I'm a tooltip!">Text</button>
  <div class="sq">
    Foo
  </div>
</body>

11
ответ дан Rory McCrossan 16 August 2018 в 11:13
поделиться
  • 1
    Хм, хорошо, что мне что-то задумалось – danjbh 12 December 2017 в 13:07
  • 2
    Это решение замечательно, особенно если вы работаете с Sass / LESS, поскольку вы можете включить свои таблицы стилей с помощью другого родительского селектора – lumio 12 December 2017 в 13:10
  • 3
    Но каким-то образом этот метод может вызвать некоторую проблему, например большой css размер для некоторого случая. не мог сказать, что это здорово, но хорошее решение. – Pedram 12 December 2017 в 13:19
  • 4
    @ Mr.x логика CSS идентична вашему решению, добавьте несколько лишних байтов для префикса класса body. – Rory McCrossan 12 December 2017 в 13:21
  • 5
    +1. Я делал это в прошлом, и он отлично работал. Я не помню всех деталей, но IIRC мы разделили опцию 1 и вариант 2 на два отдельных файла SCSS, которые затем были переписаны и объединены вместе. – async 12 December 2017 в 15:41

Вы можете использовать detach, используя jquery 

<script>
    (function() {
      var styles = {
        light: $("#light").detach(),
        dark:  $("#dark")
      };

      $("input[name=chooseStyle]").click(function() {
        var other = this.value === "light" ? "dark" : "light";
        styles[this.value].appendTo('head');
        styles[other].detach();
      });
    })();
  </script>

Демо-ссылка

3
ответ дан sridhar rajan 16 August 2018 в 11:13
поделиться

Вы можете попробовать что-то вроде этого: 

let test = true;
$('#css_toggle').click(function() {
  if(test) {
    $('link.sty').attr("href","style.css");
    test = false;
  } else {
    $('link.sty').attr("href","style1.css");
    test = true;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link class="sty" href="style.css" rel="stylesheet">

<button id="css_toggle" title="I'm a tooltip!">Text</button>
<div class="sq"></div>

2
ответ дан Temani Afif 16 August 2018 в 11:13
поделиться

Имеется запрошенный простой пример:

HTML: 

<link rel="stylesheet" type="text/css" id='styles' href='path_to_your_style_1'>
<button id="css_toggle" title="I'm a tooltip!">Text</button>

JS: 

 $('#css_toggle').click(function () {
  if ($("link[id='styles']").attr('href') == 'path_to_your_style_1'){
    $("link[id='styles']").attr('href', 'path_to_your_style_2');
  } else { 
    $("link[id='styles']").attr('href', 'path_to_your_style_1');
  }
});
3
ответ дан VTodorov 16 August 2018 в 11:13
поделиться
Другие вопросы по тегам:

Похожие вопросы: