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