0

我创建了一个 cms 主题，它有一些我想在现场演示中展示的自定义功能。基本上我想添加 Javascript 样式切换器或修饰符。我希望用户从复选框中选择一些值或选择标签，并且选择的值应该反映在 html 元素上。例如，

我的页面容器是

<div id="container"> <!--PAGE GOES HERE --> </div>

如果用户在选择此选项时单击“配色方案蓝色”，我希望我的容器添加“blue_theme”类

<div id="container" class="blue_theme" > <!--PAGE GOES HERE --> </div>

另外，是否可以像这样直接更改css属性

/* Base property */
#container{
background:red;
}

如果用户在选择此选项时单击“配色方案蓝色”，我想让我的容器成为

/* Base property */
#container{
background:blue;
}
4

12 回答 12

1

你也可以用 CSS 来做。像这样写：

HTML

<input type="radio" name="color" class="red"/> Red
<input type="radio" name="color" class="blue" /> Blue
<div id="container" for>
    choose theme:
</div>

CSS

#container {
    width: 100%;
    height: 500px;
    overflow: auto;
}

.red:checked ~ #container { background: red}
.blue:checked ~ #container  { background: blue }

检查这个 http://jsfiddle.net/wd6Cr/1/

于 2012-09-04T07:24:41.070 回答
0

你在尝试这样的事情：

解决方案1：

HTML：

<div id="container">
    choose theme:
    <input type="radio" name="radio-theme" data-color="red" /> Red
    <input type="radio" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery

$("#container").find("input[type=radio]").on("change", function(){
    var dataTheme = $(this).data("color");
    $("#container").removeAttr("class");
    $("#container").addClass(dataTheme);   
});​

演示 1

解决方案2：

HTML：

<div id="container">
    choose theme:
    <input type="checkbox" name="radio-theme" data-color="red" /> Red
    <input type="checkbox" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery：

$("#container").find("input[type=checkbox]").on("change", function(){    
    var dataTheme = $(this).data("color");    
    if( $(this).is(":checked") ) {        
        $("#container").removeAttr("class");
        $("#container").addClass(dataTheme);         
    } else {
        $("#container").removeAttr("class"); 
    }  
});​

演示 2

于 2012-09-04T07:13:21.817 回答
0

如果您想使用 jQuery 为其添加样式，您可以执行以下操作：

$('#container').css({
    "background-color" : "blue",
    "color" : "red"
});

或者，您可以在用户单击按钮时为其添加一个类：

<label for="blue_theme">Blue</label>
<input type="checkbox" id="blue_theme"/>
<div id="container"></div>​

$("#blue_theme").click(function() {
    $("#container").attr('class', 'blue_theme');
})​

例如）http://jsfiddle.net/charlescarver/jp8UL/

此外，您应该注意，如果您希望样式在页面加载时保持不变，您可能需要设置一个 cookie。我会看看GitHub 上的jQuery Cookie。

于 2012-09-04T07:16:36.463 回答
0

使用类而不是 ID，您的函数和 HTML 可能如下所示：

HTML：

<ul id="changer">
  <li class="blue">Blue color</li>
  <li class="red">Red color</li>
</ul>
<div id="container"></div>

jQuery

var $container = $('#container');
$('#changer').on('click', 'li', function(){

  var $this = $(this),
      $color = $this.attr('class');

  $container.removeClass().addClass($color);

});
于 2012-09-04T07:18:10.183 回答
0

用这个：

$('#bluebttn').click(function(){
    $('#container').removeClass().addClass('blue_theme') ;
});

假设

你的蓝色按钮的 ID 是#bluebttn

你的蓝色 css 类的名称是 blue_theme

重复其他颜色。

于 2014-08-23T10:45:43.537 回答
0

你可以使用这个纯 JavaScript 来做到这一点

colorOption.onchange = function() {
    var colorValue = option[colorOption.selectedIndex].value;
        template.style.background = colorValue;
        template.innerHTML = template.innerHTML;
};

你可以使用这个jsfiddle

于 2014-08-20T06:28:39.203 回答
0

如果您不想添加或删除类并且只想更改颜色，您可以试试这个。

   $('#yourbutton').click(function(){
        $('#container').css('background-color', 'blue');
    });
于 2014-08-26T16:39:59.797 回答
0

像这样的东西：http: //jsbin.com/EKEYOfEl/4/

HTML：

<select class="themeSwitch">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>     
<div id="container"> <!--PAGE GOES HERE --> </div>

CSS：

#container{
    background:red;
    height:100px;
    width:100%;
}

.custom_class_added{
    background:blue !important;
}

JS：

$(document).on("change", ".themeSwitch", function(){
    var theme = $(this).val();
    if(theme=="red"){     
        $("#container").removeClass("custom_class_added");
    }else if(theme=="blue"){
        $("#container").addClass("custom_class_added");
    }
});

现在通过更改选择框的值，您可以通过切换 css 类来简单地更改背景颜色。

于 2014-01-29T12:04:38.777 回答
0

尝试这个：

$(".button").click(function(){
    $("#container").attr('class','custom_class_added');
})

您也可以使用 addClass() 和 removeClass()，具体取决于您的功能

于 2012-09-04T07:05:34.350 回答
0

设置一个类而不是更改<div>. 特别是因为 ID 名称中不允许有空格。

HTML（改变状态）

<div id="container" class="custom_class_added">

CSS

#container.custom_class_added{
    background: blue;
}
于 2012-09-04T07:06:10.587 回答
0

对于添加类，addClass()：

$('#container').addClass('custom_class_added');

对于更改 css，css()：

$('#container').css('color', 'blue');
于 2012-09-04T07:08:15.377 回答
0

$('#container).css({'background-color' : 'blue'});在您的 onchange 事件中使用。这应该适用于 CSS 样式部分。
至于要在标签中添加类的部分，请使用$('#container).attr('class', 'custom_class_added');，这会将类属性添加到标签中。

将此代码用于选择框之类的表单元素将如下所示：

<select id="mySelectBox">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){
        $("#mySelectBox").change(function(){
            $("#theElementYouWant").css({"background-color" : $("#mySelectBox").val()});
        });
    });
</script>

要使用$('#container).attr('class', 'custom_class_added');代码，您可以将其放置在<script></script>标签之间的任何位置。

于 2012-09-04T07:08:51.117 回答