JQuery не может правильно переключать классы для настройщика темы - PullRequest
Новая
       4

JQuery не может правильно переключать классы для настройщика темы

0 голосов
/ 04 февраля 2020

У меня есть 3 css темы, каждая из которых меняет страницу на указанную тему. Первые 2 являются предустановленными классами, и они отлично работают при переключении между каждым из них. Третья тема - это пользовательская тема, которая выбирает пользователя и создает его.

3-я тема связана с тремя проблемами:

  1. Я должен дважды нажать кнопку отправки, чтобы тема вступает в силу.
  2. Когда применена пользовательская тема, я не могу переключиться обратно на любую из двух других тем. Однако я могу постоянно изменять значения для третьей темы и применять их (после двойного нажатия)
  3. Атрибут hover не работает, когда элемент наведен на него, он не возвращается к своей нормальной форме

Вот код jquery: 

$(document).ready(function(){
$("#b1").click(function(){
  $("body").removeClass("body2 body3").addClass("body1");
  $(".themes").removeClass("theme2 theme3").addClass("theme1");
  $(".txts").removeClass("txt2 txt3").addClass("txt1");
})

$("#b2").click(function(){
  $("body").removeClass("body1 body2").addClass("body2");
  $(".themes").removeClass("theme1 theme3").addClass("theme2");
  $(".txts").removeClass("txt1 txt3").addClass("txt2");
})

var vBack
var vColor
var cFont
var cBack;
var cColor;

$("#b3").click(function(){ 
  vBack= $("#op1").val();
  vColor= $("#op2").val();
  cFont= $("#op3").val();

  switch(vBack) {
      case('blue'):
      cBack= "rgb(80, 160, 200)";
      break;
      case('red'):
      cBack= "rgb(250, 70, 70)";
      break;
      case('yellow'):
      cBack= "rgb(250, 250, 130)";
      break;
  }

  switch(vColor) {
      case('purple'):
      cColor= "rgb(120, 10, 150)";
      break;
      case('orange'):
      cColor= "rgb(250, 180, 50)";
      break;
      case('turquoise'):
      cColor= "rgb(0, 250, 250)";
      break;
  }

  $(".body3").css({"background": cBack, "color": cColor});

  $(".theme3").css({"border": 0, "outline": 0, "background": cColor, "color": cBack, "font-family": cFont});

  $(".theme3").hover(function() {
    $(this).css({"background": cBack, "color": cColor, "font-family": cFont, "box-shadow": "0 0 0 2px " +cColor});
  });

  $(".txt3").css({"color": cColor, "font-family": cFont});

  $("body").removeClass("body1 body2").addClass("body3");
  $(".themes").removeClass("theme1 theme2").addClass("theme3");
  $(".txts").removeClass("txt1 txt2").addClass("txt3");
  })
})

Вы можете проверить указанные проблемы и прочитать полный код по ссылке на codepen

РЕДАКТИРОВАТЬ: Исправлена ​​проблема с парением

1 Ответ

0 голосов
/ 05 февраля 2020

Исправлено 2 из 3 проблем.

Первая - проблема с наведением курсора, вам нужно добавить 2 функции в прототипе .hover. Один со свойствами css наведения, а другой со своими исходными свойствами.

Вот код: 

$(".theme3").css({"box-shadow": "none", "border": "0", "outline": "0", "background": cColor, "color": cBack, "font-family": cFont});

$(".theme3").hover(function() {
  $(this).css({"background": cBack, "color": cColor, "font-family": cFont, "box-shadow": "0 0 0 2px " +cColor})
}, function() {
    $(this).css({"box-shadow": "none", "border": "0", "outline": "0", "background": cColor, "color": cBack, "font-family": cFont})
  });

Вторая проблема исправлена ​​добавлением «! Важно» ко всем атрибуты предустановленных css классов, чтобы я мог вернуться к ним. Спасибо Саяли Акхаде за то, что он связал мне свое решение здесь

Третий вопрос, связанный с необходимостью дважды нажать кнопку, остается мне неизвестным.

...