jQuery的，如果div有一个包含一些不是删除类

字（变量）I类有类.wrapperjQuery的，如果div有一个包含一些不是删除类

另外我有一个彩色调色板更改页面上的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属性的类？

谢谢！

来源

2015-12-05 Денис Рябоштанов

1： ID必须唯一

第二：了解selectors

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

* = //如果这包含

^= //如果打头

$ = // if e NDS与

附加：我知道.prop()将工作..但我用.attr()代替

编辑您的评论后（正如我所说的ID必须是独特的使用数据属性代替）

在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

来源

2015-12-05 15:23:13

谢谢！我用同样的脚本来找到div，但我不明白如何删除我需要的类..如果我点击具有'id =“Color”和class =“blue”的span，那么jQuery会添加一个名为**“blueColor”**的类，所以当我点击另一个span时，例如使用'id =“Color”和class =“red”'我想删除第一个类，名为** “blueColor”** 我想在第二部分找到该课程，它可能是** Color **或** Theme ** –

@ДенисРябоштанов我明白了您的观点..请参阅我的最终答案 –

谢谢非常！我会检查你的所有代码，以了解它是如何工作的！再次，谢谢！:) –

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

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

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

})

来源

2015-12-05 16:06:50 marukobotto

请加上为什么以及如何代码回答了这个问题了一些解释。 – trincot

jQuery的，如果div有一个包含一些不是删除类

回答

相关问题