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有一個包含一些不是刪除類

回答

相關問題