简化 jquery

Question

我正在努力简化我的 jquery，这样我就不必写那么久了。我有 3 个盒子，我希望能够独立更改每个盒子的颜色。但是不需要为每个盒子分别输入 jquery 。（目前只有 .profile1（框）从下拉菜单中更改颜色）。

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

只需调用此方法并为其提供元素，然后它获取 id 的值，例如 red 并将其保存在变量中。然后你设置你在调用值时给函数的元素的颜色（必须是颜色）：

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

您可以在 foreach 循环中调用此方法。

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

Answer 2

这就是我要做的：

添加一个变量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

简化 jquery

Simplifying jquery

html

javascript

jquery

simplify