前の追加クラスを使用した置換

Question

こんにちは、私はjqueryを使用して以前の追加クラスで置き換えようとしています。しかし、私のテストコードは正しく動作していません。

は私がcodepen.io前回クリックした色の位置は、新たにクリックされた名前の変更を残すために必要

からこのDEMOを作成しました。

デベロッパーコンソールでdemoページを確認した場合。赤色のdivをクリックするとこの色のクラスは、自動的に

<div class="changeBgcolor red"></div> 

よう.changeBgcolor div要素を追加することが、後に、それは、新たにクリックされた色を残すべきであるそこにこの

<div class="changeBvcolor red blue"></div> 

赤クラスステーのようなぼかしカラーのdivをクリックしてください。

<div class="changeBgcolor">Background color changing BOX</div> 
<div class="color"> 
    <div class="kek red" id="1">Red</div> 
    <div class="kek blue" id="2">Blue</div> 
    <div class="kek green" id="3">Green</div> 
    <div class="kek yellow" id="4">Yellow</div> 
    <div class="kek orange" id="5">Orange</div> 
    <div class="kek black" id="6">Black</div> 
</div> 

JS

$(document).ready(function() { 
 
    $("body").on("click", ".red", function(event) { 
 
    $(".changeBgcolor").addClass("red"); 
 
    }); 
 
    $("body").on("click", ".blue", function(event) { 
 
    $(".changeBgcolor").addClass("blue"); 
 
    }); 
 
    $("body").on("click", ".green", function(event) { 
 
    $(".changeBgcolor").addClass("green"); 
 
    }); 
 
    $("body").on("click", ".yellow", function(event) { 
 
    $(".changeBgcolor").addClass("yellow"); 
 
    }); 
 
    $("body").on("click", ".orange", function(event) { 
 
    $(".changeBgcolor").addClass("orange"); 
 
    }); 
 
    $("body").on("click", ".black", function(event) { 
 
    $(".changeBgcolor").addClass("black"); 
 
    }); 
 
});

.changeBgcolor { 
 
    padding:30px; 
 
    border-bottom:1px solid #d8dbdf; 
 
} 
 
.kek { 
 
    float:left; 
 
    height:30px; 
 
    margin:0px 30px; 
 
    cursor:pointer; 
 
    text-align:center; 
 
    line-height:30px; 
 
    padding:10px; 
 
} 
 
.color { 
 
    position:relative; 
 
    padding:30px 0px; 
 
} 
 

 
.red { 
 
    background-color:red; 
 
    color:#ffffff; 
 
} 
 
.blue { 
 
    background-color:blue; 
 
    color:#ffffff; 
 
} 
 
.green { 
 
    background-color:green; 
 
    color:#ffffff; 
 
} 
 
.yellow { 
 
    background-color:yellow; 
 
} 
 
.orange { 
 
    background-color:orange; 
 
} 
 
.black { 
 
    background-color:black; 
 
    color:#ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="changeBgcolor">Background color changing BOX</div> 
 
<div class="color"> 
 
    <div class="kek red" id="1">Red</div> 
 
    <div class="kek blue" id="2">Blue</div> 
 
    <div class="kek green" id="3">Green</div> 
 
    <div class="kek yellow" id="4">Yellow</div> 
 
    <div class="kek orange" id="5">Orange</div> 
 
    <div class="kek black" id="6">Black</div> 
 
</div>

Answer 1

あなたは変数に元のクラスを格納し、クリックをクリックしたのdivのクラスを追加することができます。

var c = $(".changeBgcolor").attr('class') 
 
$('.color > div').click(function() { 
 
    $(".changeBgcolor").attr('class', c + ' ' + $(this).attr('class').split(' ')[1]) 
 
})

.changeBgcolor { 
 
    padding: 30px; 
 
    border-bottom: 1px solid #d8dbdf; 
 
} 
 
.kek { 
 
    float: left; 
 
    height: 30px; 
 
    margin: 0px 30px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    padding: 10px; 
 
} 
 
.color { 
 
    position: relative; 
 
    padding: 30px 0px; 
 
} 
 
.red { 
 
    background-color: red; 
 
    color: #ffffff; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
    color: #ffffff; 
 
} 
 
.green { 
 
    background-color: green; 
 
    color: #ffffff; 
 
} 
 
.yellow { 
 
    background-color: yellow; 
 
} 
 
.orange { 
 
    background-color: orange; 
 
} 
 
.black { 
 
    background-color: black; 
 
    color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="changeBgcolor">Background color changing BOX</div> 
 
<div class="color"> 
 
    <div class="kek red" id="1">Red</div> 
 
    <div class="kek blue" id="2">Blue</div> 
 
    <div class="kek green" id="3">Green</div> 
 
    <div class="kek yellow" id="4">Yellow</div> 
 
    <div class="kek orange" id="5">Orange</div> 
 
    <div class="kek black" id="6">Black</div> 
 
</div>