Упрощение jQuery

Question

Я пытаюсь упростить свой jquery, поэтому мне не нужно так долго делать это. У меня есть 3 коробки, и я хочу иметь возможность менять цвет каждого окна независимо. Но без необходимости вставлять jquery для каждой коробки отдельно. (На данный момент только .profile1 (box) меняет цвет в выпадающем меню).

HTML

<div class="profile1"></div> 

<div class="profile2"></div> 

<div class="profile3"></div> 

<div class="overlay"></div> 

<div class="popup"> 
<select class="dropdown" id="cp"> 
<option id="red"> red </option> 
<option id="yellow"> yellow </option> 
<option id="blue"> blue </option> 
</select> 
<a class="close" onclick="hidePopup()" href="">CLOSE</a> 
<input onclick="hidePopup()" type="submit" value="SUBMIT" id="submit" class="submit"> 
</div> 

CSS

.profile1 { 
margin-left: 1.7%; 
margin-top: 6%; 
height: 40%; 
width: 18%; 
background-color: #0D7BFF; 
position: absolute; 
z-index: -1; 
border-radius: 2px; 
} 

.profile2 { 
margin-left: 21.4%; 
margin-top: 6%; 
height: 40%; 
width: 18%; 
background-color: #0D7BFF; 
position: absolute; 
z-index: -1; 
border-radius: 2px; 
} 

.profile3 { 
margin-left: 41.1%; 
margin-top: 6%; 
height: 40%; 
width: 18%; 
background-color: #0D7BFF; 
position: absolute; 
z-index: -1; 
border-radius: 2px; 
} 

.student-name { 
color: #FDFDFD; 
font-size: 1.2vw; 
text-align: center; 
margin-top: 10%; 
} 

.overlay { 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
position: absolute; 
background-color: #555454; 
opacity: 0.80; 
z-index: 2; 
} 

.popup { 
top: 20%; 
left: 27.5%; 
height: 17%; 
width: 45%; 
background-color: #FDFDFD; 
position: absolute; 
border-radius: 5px; 
z-index: 3; 
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75); 
-moz-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75); 
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75); 
} 

#submit { 
background: #0D7BFF; 
border: none; 
cursor: pointer; 
color: #FDFDFD; 
font-size: 1.8vw; 
font-family: Avenir Next; 
width: 50%; 
right: 0%; 
bottom: 0%; 
top: 76.5%; 
position: absolute; 
border-radius: 0px 0px 5px 0px; 
text-align: center; 
} 

#submit:hover { 
background-color: #004598; 
transition: all 0.3s ease-out; 
} 

.close { 
background: #0D7BFF; 
border: none; 
cursor: pointer; 
color: #FDFDFD; 
font-size: 1.8vw; 
font-family: Avenir Next; 
width: 50%; 
left: 0%; 
bottom: 0%; 
top: 76.5%; 
position: absolute; 
border-radius: 0px 0px 0px 5px; 
text-decoration: none; 
text-align: center; 
} 

.close:hover { 
background-color: #004598; 
transition: all 0.3s ease-out; 
} 

JQuery

$(document).ready(function() { 

$('.popup,.overlay').hide(); 

$(".profile1").click(function() { 
$(".popup, .overlay").show(300); 
}); 

}); 

$(document).mouseup(function(e) { 
var popup = $(".popup"); 
if (!$('.popup').is(e.target) && !popup.is(e.target) && popup.has(e.target).length === 0) { 
hidePopup(); 
} 
}); 

function hidePopup() { 
$(".popup, .overlay").hide(300).fadeOut(); 
} 


$(document).ready(function() { 
$(".submit").click(function() { 
var element = document.getElementById("cp"); 
$(".profile1").css({ 
    "background-color": element.options[element.selectedIndex].id 
}); 
}); 

}); 

Я ценю все помочь

Answer 1

Это то, что я хотел бы сделать:

Добавить переменную var active;

Изменить это:

$(".profile1").click(function() { 
    $(".popup, .overlay").show(300); 
}); 

к этому:

$("[class*='profile']").click(function() { 
    $(".popup, .overlay").show(300); 
    active = $(this); 
    }); 

и изменить это:

$(".profile1").css({ 

к этому:

active.css({ 

Here is the JSFiddle demo

Answer 2

Просто вызовите этот метод и дать ему элемент, а затем он получает значение id, который является, например, красным и сохраняет его в переменной. Затем установить цвет элемента вы дали функцию при вызове значения (который должен быть цвет):

function changeColor(this){ 
var val = this.attr('id'); 
this.css('background-color', val); 
} 

Этот метод можно вызвать в Еогеасп-петле.

$('.dropdown').children('option').each(function() { 
    changeColor(this); 
});