CSS-jquery點擊色板圖標更改背景色板

Question

我想單擊特定色板時改變頁面背景。我的jQuery代碼似乎不工作。有什麼想法嗎？

$(".black swatch").click(function() { 
 
    $("body").addClass("black"); 
 
});

.swatch { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin-right: 20px; 
 
    border: 1px solid #000; 
 
} 
 
.black { 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="swatches"> 
 
    <div class="black swatch"></div>

Answer 1

你想要這樣嗎？這是因爲您只需單擊.swatch div，然後運行腳本添加該類。

$(".swatch").click(function() { 
 
    $("body").addClass("black"); 
 
});

.swatch { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin-right: 20px; 
 
    border: 1px solid #000; 
 
} 
 
.black { 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="swatches"> 
 
    <div class="black swatch"></div>

Answer 2

問題是.swatch不是.black在

$(".black swatch") 

還缺少.在swatch子元素，儘管這會不會影響以前的問題。

如果你有html和.swatch元素多.swatch要素只有兩個className是你可以取代swatchclassName在body

$(".swatch").click(function() { 
    $("body").addClass(this.className.replace(/swatch/, "").trim()); 
}); 

Answer 3

設置className只需卸下類swatch

Working JS Bin Demo