Verschiebung mit vorheriger Addition Klasse

Question

Hallo, ich versuche, eine Verschiebung mit vorherigen zusätzlichen Klasse mit jquery zu machen. Aber mein Testcode funktioniert nicht richtig.

Ich habe diese erstellt DEMO von codepen.io

Die bisherige geklickt Farbort die neu angeklickt Umbenennungs verlassen muss.

Wenn Sie die demo Seite in der Entwicklerkonsole überprüfen. Wenn Sie auf rote Farbe div klicken. Diese Farbklasse automatisch das Hinzufügen .changeBgcolor div wie

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

aber nach der Unschärfe Farbe div klicken wie dieser

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

des roten Klasse Aufenthalt dort soll es die neu angeklickt Farbe verlassen werden.

<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

Sie können in variablen ursprüngliche Klasse speichern und dann auf Klick Add Klasse angeklickt 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>