我有三个Li和两个功能我得到的点击他们每个人变为白色,不过我想点击三个其他两个回归到原来的颜色之一。
function whitecolor(elem) {
$(elem).css('background-color', 'white');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
function graycolor(elem) {
$(elem).css('background-color', '#F2F2F2');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
$("#op1").click(function(evt) {
evt.preventDefault();
graycolor(evt.target);
});
$("#op2").click(function(evt) {
evt.preventDefault();
graycolor(evt.target);
});
$("#op3").click(function(evt) {
evt.preventDefault();
graycolor(evt.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="" id="op1" name="op1">aaaa</a></li>
<li><a href="#" id="op2" name="op2">bbb</a></li>
<li><a href="#" id="op3" name="op3">ccc</a></li>
我想,如果我点击OP2的OP1获得功能whitecolor
的特点。
要做到这一点最干净的方法是使用CSS类,但如果你坚持使用javascript那么这将是您的解决方案。
我甚至编辑你的白色函数删除边界
function whitecolor(elem) {
$(elem).css('background-color', 'white');
$(elem).css('border-top', '');
$(elem).css('border-right', '');
}
function graycolor(elem) {
$(elem).css('background-color', '#F2F2F2');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
$("#op1").click(function(evt) {
evt.preventDefault();
graycolor(evt.target);
whitecolor($('#op2'));
whitecolor($('#op3'));
});
$("#op2").click(function(evt) {
evt.preventDefault();
graycolor(evt.target);
whitecolor($('#op1'));
whitecolor($('#op3'));
});
$("#op3").click(function(evt) {
evt.preventDefault();
graycolor(evt.target);
whitecolor($('#op2'));
whitecolor($('#op1'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<li><a href="" id="op1" name="op1">aaaa</a></li>
<li><a href="#" id="op2" name="op2">bbb</a></li>
<li><a href="#" id="op3" name="op3">ccc</a></li>
</body>
</html>
我建议将白样式的所有元素,然后在顶部的适用的灰色风格所点击的元素。
我宁愿使用一个类,但在这个例子中,我只是针对同类型选择的元素,因此,我并不需要接触您的标记。
我也去掉了一些不必要的重复:因为所有的三个点击处理程序的身体是一样的,你可以使用相同的匿名函数为所有三个元素的单击处理程序,以逗号分隔。
function whitecolor(elem) {
$(elem).css('background-color', 'white');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
function graycolor(elem) {
$(elem).css('background-color', '#F2F2F2');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
$("#op1,#op2,#op3").click(function(evt) {
evt.preventDefault();
whitecolor($('a'));
graycolor(evt.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="" id="op1" name="op1">aaaa</a></li>
<li><a href="#" id="op2" name="op2">bbb</a></li>
<li><a href="#" id="op3" name="op3">ccc</a></li>
相反,实质上重复的三个独立的部件相同的代码,可以考虑使用上的元素相同的类名和编写代码立即行动对整个集团。
这也是简单得多切换类名,而不是单独修改样式规则(尤其是考虑到几个你接触并没有真正改变规则)。
$('.item').click(function() {
$('.item').removeClass('gray') // resets all the elements to white
$(this).addClass('gray') // sets the clicked element to gray
});
/* set the default background color here so you don't need to toggle two classes.
Also set the borders here since those don't change at all */
.item {
background-color: #FFF;
border-top: 1px solid #8C8A8A;
border-right: 1px solid #8C8A8A;
}
/* Give the gray rule more specificity, so it'll override the default */
.item.gray {
background-color: #F2F2F2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a href="#" id="op1" class="item" name="op1">aaaa</a></li>
<li><a href="#" id="op2" class="item" name="op2">bbb</a></li>
<li><a href="#" id="op3" class="item" name="op3">ccc</a></li>
</ul>
您需要设置为灰色单击元素之前对其他元素的颜色设置。
此外,您还可以通过应用相同的逻辑来所有的元素与forEach
的帮助下,IDS的阵列上执行的缩短你的代码。
最后,你需要在开始一次运行whitecolor
功能到样式应用于所有元素。
function whitecolor(elem) {
$(elem).css('background-color', 'white');
$(elem).css('border', '0px');
}
function graycolor(elem) {
$(elem).css('background-color', '#F2F2F2');
$(elem).css('border', '0.1px solid #8c8a8a');
}
const elems = ['#op1', '#op2', '#op3'];
elems.forEach(elem => {
whitecolor(elem);
$(elem).click(evt => {
evt.preventDefault();
elems.forEach(e => whitecolor(e));
graycolor(evt.target);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="#" id="op1" name="op1">aaaa</a></li>
<li><a href="#" id="op2" name="op2">bbb</a></li>
<li><a href="#" id="op3" name="op3">ccc</a></li>
一个解决方案是恢复所有呼吁所有whitecolor()
功能的链接,然后应用graycolor()
功能只对目标之一。
function whitecolor(elem)
{
$(elem).css('background-color', 'white');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
function graycolor(elem)
{
$(elem).css('background-color', '#F2F2F2');
$(elem).css('border-top', '0.1px solid #8c8a8a');
$(elem).css('border-right', '0.1px solid #8c8a8a');
}
$("#op1, #op2, #op3").click(function(evt)
{
evt.preventDefault();
whitecolor("#op1, #op2, #op3");
graycolor(evt.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="" id="op1" name="op1">aaaa</a></li>
<li><a href="#" id="op2" name="op2">bbb</a></li>
<li><a href="#" id="op3" name="op3">ccc</a></li>