Question

我有班级.wrapper

我还有一个颜色托盘来更改页面上的background和某些项目的main color。

以下是代码：

<div class="wrapper"></div>
<div class="color-picker">
    <div class="">
        <ul class="list-unstyled">
            <li class="col-md-6"><span id="Theme" class="light"></span></li>
            <li class="col-md-6"><span id="Theme" class="dark"></span></li>
        </ul>
        <ul class="list-unstyled">
            <li class="col-md-3"><span id="Color" class="red"></span></li>
            <li class="col-md-3"><span id="Color" class="yellow"></span></li>
            <li class="col-md-3"><span id="Color" class="blue"></span></li>
        </ul>
    </div>
</div>

和jQuery代码：

$(".color-picker span").click(function () 
{
    var valcolor = $(this).prop('class');
    var valtype = $(this).prop('id');

    $(".wrapper").addClass(valcolor + valtype);

});

如何从包装器中删除包含与我单击的元素相同的valltype属性的类？

谢谢！

Answer 1

1st： ID必须是唯一的

第二名了解selectors

$(".wrapper [class*='"+ valtype  +"']")

* = //如果包含

^ = //如果以
开头
$ = //如果以
结尾

其他：我知道.prop()会有效..但我过去常常使用.attr()

在您发表评论后进行修改 （正如我所说，Id必须是唯一使用数据属性）

in html

<div class="wrapper" data-theme="" data-color="">This is Wrapper Div</div>
<div class="color-picker">
    <div class="">
        <ul class="list-unstyled">
            <li class="col-md-6"><span data-id="Theme" class="light">Theme - light</span></li>
            <li class="col-md-6"><span data-id="Theme" class="dark">Theme - dark</span></li>
        </ul>
        <ul class="list-unstyled">
            <li class="col-md-3"><span data-id="Color" class="red">Color - red</span></li>
            <li class="col-md-3"><span data-id="Color" class="yellow">Color - yellow</span></li>
            <li class="col-md-3"><span data-id="Color" class="blue">Color - blue</span></li>
        </ul>
    </div>
</div>

在js中

$(".color-picker span[data-id='Theme']").click(function () {

    var valTheme = $(this).attr('class');
    $(".wrapper").attr('data-theme' , valTheme);
    var GetwrapperTheme = $(".wrapper").attr('data-theme');
    alert(GetwrapperTheme);
});
$(".color-picker span[data-id='Color']").click(function () {
    var valcolor = $(this).attr('class');
    $(".wrapper").attr('data-color' , valcolor);
    var GetwrapperColor = $(".wrapper").attr('data-color');
    alert(GetwrapperColor);
    $(".wrapper").css('color', valcolor);
});

在css中

.wrapper{
  background: yellow;
  padding: 20px;
  color : #000;
  font-size: 20px;
  text-align : center;
}
.wrapper[data-theme="light"]{
  background : #eee;
}
.wrapper[data-theme="dark"]{
  background : #ccc;
}

Working Demo

Answer 2

$(".color-picker span").click(function (){

  if($(this).is('.valtype')){

     $(this).find('.valtype').remove();
   }

})

Jquery，如果div的类包含一些单词（变量）而不是删除该类

2 个答案: