单击数字键盘JS或Jquery时，是否用数字修改部分类名？

Question

我正在尝试创建一个前端类选取器，这样客户端就可以在提交到CMS中之前查看前端的页面样式，就像页面样式预览面板一样。

我已经从1- 10建立了一个非常快速和粗糙的UI数字垫。页面样式的名称是网格样式-1，网格样式-2等(1-10)，并根据您点击键盘上的数字，这将改变在类结束时的数字。顺便说一下，Class应用于页面顶部的html。

<div class="style-picker">
<div class="picker-window">
    <div class="style-display">
    <h2>Grid Style<span></span></h2>

    </div>
    <div class="controlpad-wrapper">
        <ol class="digit-wrapper">
            <li id="digit-1" class="digit">1</li>
            <li id="digit-2" class="digit">2</li>
            <li id="digit-3" class="digit">3</li>
            <li id="digit-4" class="digit">4</li>
            <li id="digit-5" class="digit">5</li>
            <li id="digit-6" class="digit">6</li>
            <li id="digit-7" class="digit">7</li>
            <li id="digit-8" class="digit">8</li>
            <li id="digit-9" class="digit">9</li>
            <li id="digit-10" class="digit">10</li>
        </ol>
    </div>
</div>

和JS：

<script>
$('.style-picker .digit-wrapper #digit-1').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-1");
});
$('.style-picker .digit-wrapper #digit-2').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-2");
});
$('.style-picker .digit-wrapper #digit-3').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-3");
});
$('.style-picker .digit-wrapper #digit-4').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-4");
});
$('.style-picker .digit-wrapper #digit-5').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-5");
});
$('.style-picker .digit-wrapper #digit-6').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-6");
});
$('.style-picker .digit-wrapper #digit-7').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-7");
});
$('.style-picker .digit-wrapper #digit-8').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-8");
});
$('.style-picker .digit-wrapper #digit-9').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-9");
});
$('.style-picker .digit-wrapper #digit-10').click(function(e) {
    e.preventDefault();
    $("html").addClass("grid-style-10");
});

到目前为止，我只能在单击时获得每个类的名称，所以我只剩下一个类名字符串，但我不能让前一个类消失-但我假设有一种更简单的方法来遍历这个类，只修改类的最后一位数，还不能完全解决这个问题。

如有任何想法或帮助，我们将不胜感激！

诚挚的问候

西蒙;-)

Answer 1

这是一个经过清理的简单版本。

单击事件将获取id，并从body中删除所有类，然后添加新类。

​

$(document).ready(function(){
   $(document).on("click",".digit",function(e){
     key = e.target.id.replace("digit-","");
     $("body").removeClass().addClass("grid-style-" + key)
   });
});

.grid-style-1{background:red;}
.grid-style-2{background:green;}
.grid-style-3{background:blue;}
.grid-style-4{background:black;}
.grid-style-5{background:teal;}
.grid-style-6{background:silver;}
.grid-style-7{background:gold;}
.grid-style-8{background:orange;}
.grid-style-9{background:#00aaff;}
.grid-style-10{background:#aaff33;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="style-picker">
<div class="picker-window">
    <div class="style-display">
    <h2>Grid Style<span></span></h2>

    </div>
    <div class="controlpad-wrapper">
        <ol class="digit-wrapper">
            <li id="digit-1" class="digit">1</li>
            <li id="digit-2" class="digit">2</li>
            <li id="digit-3" class="digit">3</li>
            <li id="digit-4" class="digit">4</li>
            <li id="digit-5" class="digit">5</li>
            <li id="digit-6" class="digit">6</li>
            <li id="digit-7" class="digit">7</li>
            <li id="digit-8" class="digit">8</li>
            <li id="digit-9" class="digit">9</li>
            <li id="digit-10" class="digit">10</li>
        </ol>
    </div>
</div>

​