如何将两种功能之外,以与

问题描述 投票:1回答:5

我有三个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的特点。

javascript jquery html
5个回答
0
投票

要做到这一点最干净的方法是使用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>

0
投票

我建议将白样式的所有元素,然后在顶部的适用的灰色风格所点击的元素。

我宁愿使用一个类,但在这个例子中,我只是针对同类型选择的元素,因此,我并不需要接触您的标记。

我也去掉了一些不必要的重复:因为所有的三个点击处理程序的身体是一样的,你可以使用相同的匿名函数为所有三个元素的单击处理程序,以逗号分隔。

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>

0
投票

相反,实质上重复的三个独立的部件相同的代码,可以考虑使用上的元素相同的类名和编写代码立即行动对整个集团。

这也是简单得多切换类名,而不是单独修改样式规则(尤其是考虑到几个你接触并没有真正改变规则)。

$('.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>

0
投票

您需要设置为灰色单击元素之前对其他元素的颜色设置。

此外,您还可以通过应用相同的逻辑来所有的元素与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>

0
投票

一个解决方案是恢复所有呼吁所有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>
© www.soinside.com 2019 - 2024. All rights reserved.