Переключить эффект шрифта Google с помощью JavaScript

Question

Я пытаюсь создать небольшую скрытую кнопку для веб-страницы, которая будет переключать эффект шрифта Google на все h1 элементы на странице, но я не совсем уверен, как это сделать или если это вообще выполнимо. Вот код, который я имею до сих пор, любое руководство здесь будет с благодарностью.

$(".flameOn").click(function(){
    var $this = $(this);
    $this.find("h1").toggleClass("font-effect-fire");
});

.flameOn класс привязан к нажатой кнопке.

Answer 1

Проблема, скорее всего, здесь:

$this.find("h1").toggleClass("font-effect-fire");

В сущности, вы пытаетесь найти элементы h1 внутри щелкающего элемента класса flameOn, что, конечно, не имеет смысла. Вам, вероятно, просто нужен обработчик кликов, чтобы он выглядел так:

$(".flameOn").click(function(){
    $("h1").toggleClass("font-effect-fire");
});

Answer 2

Проблема, с которой вы столкнулись, связана с тем, что вы используете this искать h1 теги. Обработчик нажатия jQuery устанавливает контекст функции (т.е. this) к нажатому элементу. Когда вы звоните find метод на объекте jQuery, он попытается найти все дочерние узлы, которые соответствуют вашим критериям поиска.

$('.flameOn').click(function(){
  var $this = $(this);  // In this context 'this' is the '.flameOn' button.
                        // You should also note that 'this', by default is 
                        // already jQuery object, there is no need to wrap 
                        // it in the $() again.

  $this.find('h1')  // This will almost certainly return an empty nodeList rather
                    // than all of the h1s on your page. At best it will return
                    // any h1s contained within the button.flameOn tag
});

По сути, то, что вы пытаетесь сделать с помощью приведенного выше кода, это найти все h1внутри твоего .flameOn класс, который не имеет особого смысла, учитывая, что это кнопка.

То, что вы действительно хотите, это просто использовать ваниль $ селектор, чтобы найти все h1и переключите нужный класс:

$('.flameOn').click(function(){
  $('h1').toggleClass('font-effect-fire');
});

Answer 3

Что-то вроде этого?

<link href='http://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css'>
<script language="javascript">
function Style(enable) {
  if (!document.getElementsByTagName) return;
  links=document.getElementsByTagName("link");
  links[0].disabled=!enable;
}
Style(true);
// disables font
Style(false);
// enables font
</script>