时间戳

首页 > 解决方案 > JQuery 无法为主题定制器正确切换类

javascript - JQuery 无法为主题定制器正确切换类

问题描述

我有 3 个 css 主题，每个都将页面更改为指定的主题。前 2 个是预设类，在它们之间切换时它们工作正常。第三个是一个自定义主题，它接受用户的选择并创建它。

第三个主题产生了 3 个问题：

  1. 我必须单击提交按钮两次才能使主题真正生效。
  2. 应用自定义主题后，我无法真正切换回其他 2 个主题中的任何一个。但是，我可以不断更改第三个主题的值并应用它们（单击两次后）
  3. 悬停属性已损坏，一旦元素悬停在其上，它就不会返回其正常形式

这是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的链接测试上述问题并阅读完整代码

编辑：修复了悬停问题

标签： javascriptjqueryhtmlcssfrontend

解决方案

修复了 3 个问题中的 2 个。

首先是悬停问题，您必须在 .hover 原型中添加 2 个函数。一个具有悬停的 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})
  });

通过将“！important”添加到预设css类的所有属性来解决第二个问题，以便我可以切换回它们。感谢 Sayali Akhade 在这里为我提供了它的解决方案

我不知道必须单击按钮两次的第三个问题。

推荐阅读