通过jquery集成的切换开关替换select标签 [英] Replace select tag by a toggle switch with jquery integration

问题描述

我在项目中使用 select 标记来更改网站上的主题。这就像我项目中的魅力一样。这是我项目的代码。 jQuery样式表切换器 [ ^ ]

我想用带有jquery集成的切换开关替换 select 标签。喜欢，youtube切换黑暗主题。我发现很多切换开关的例子都是基于输入标签。我不知道如何使用Jquery配置它。？



我尝试过：



这是我的代码。



HTML，JS和JQuery

 <   script     src   =  https：// ajax。 googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\">   <   /   script  >  
 <  选择   名称  =     class   =  style-change form-control    id   = 样式 >  
 <  选项    value   =   css / default > 默认样式<   / option  >  
 <  选项    value   =  css / bootstrap-slate > 夜间模式<   / option  >  
 <   / select  >  

 $ （ function （）{
 $（'  .style-change'）。change（ function （）{
 
  var  style = $（ this ）。val（）; 
 $（'  body'）。fadeOut（  slow， function （）{
 $（'  link [rel =stylesheet]'）。attr（   href，样式+  。css ）; 
 $（'  body'）。fadeIn（  slow）; 
 
 $ .cookie（  css，style，{
 expires： 365 ， 
路径：'  /' 
}）; 
}） ; 
}）; 
}）; 
 
 $（ document ）。ready（ function （）{
 $（  #style）。val（'  <？php echo $ style;？>'）; 
}）; 

 <？php  
  if （isset（$ _ COOKIE ['  css']））{
  $ style  = $ _COOKIE ['  css'< /跨度>]; 
}  else  {
  $ style  = '  default'; 
} 
 ？>  

我正在使用jQuery cookie库来保存cookie中的用户设置。



任何建议都是值得注意的。

解决方案

（ function （）{

（' .style-change'）。change（ function （）{

var style =

（ this ） .VAL（）;

I am using a select tag in the project to change the theme on the site. that is working like a charm in my project. Here is codepen of my project. jQuery stylesheet switcher[^]
I want to replace select tag with a toggle switch with jquery integration. Like, youtube to switch dark theme. I find many examples of toggle switches that all are based on input tag. I don't know how do I configure it with Jquery.?

What I have tried:

This is my code.

HTML, JS and JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" class="style-change form-control" id="style">
  <option value="css/default">Default Style</option>
  <option value="css/bootstrap-slate">Night Mode</option>
</select>

$(function() {
  $('.style-change').change(function() {

    var style = $(this).val();
    $('body').fadeOut("slow", function() {
      $('link[rel="stylesheet"]').attr("href", style + ".css");
      $('body').fadeIn("slow");

      $.cookie("css", style, {
        expires: 365,
        path: '/'
      });
    });
  });
});

$(document).ready(function() {
  $("#style").val('<?php echo $style; ?>');
});

<?php
if (isset($_COOKIE['css'])) {
    $style = $_COOKIE['css'];
} else {
    $style = 'default';
}
?>

I'm using jQuery cookie library to save user setting in cookies.

Any suggestion would be appreciable.

解决方案

(function() {

('.style-change').change(function() { var style =

(this).val();

这篇关于通过jquery集成的切换开关替换select标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！