Question

我有3个li和2个功能，通过单击将其更改为白色得到，但是我想单击3个，另2个恢复原始颜色。

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的特征。

Answer 1

一种解决方案是恢复所有调用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>

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);
});

Answer 2

我建议将白色样式应用于所有元素，然后再将灰色样式应用于所单击的元素。

我更喜欢使用一个类，但是在本示例中，我只是使用类型选择器来定位元素，因此无需触摸您的标记。

我还删除了一些不必要的重复操作：由于所有三个单击处理程序的主体都是相同的，因此您可以对所有三个元素使用相同的匿名函数作为单击处理程序，以逗号分隔。

<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>

theory Locale_Methods
  imports Main "HOL-Eisbach.Eisbach"
begin

locale l =
  fixes n :: nat
begin

method m = (rule trans [of _ n _])

end

locale l' = p: l
begin

lemma 1: "n = n"
proof p.m
  oops

sublocale s: l "Suc n" .

lemma 2: "n = n"
proof p.m
  oops

end

end

Answer 3

与其在三个单独的元素上重复基本相同的代码，不如在这些元素上使用相同的类名，并编写代码以一次作用于整个组。

切换类名比单独修改样式规则要简单得多（特别是鉴于您正在触摸的多个规则实际上并未更改）。

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

Answer 4

最干净的方法是使用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>

Answer 5

在将被单击的元素设置为灰色之前，您需要重置其他元素的颜色。

此外，您可以在forEach的帮助下对所有元素应用相同的逻辑，从而缩短代码长度，这些代码在ID数组上执行。

最后，您需要在开始时运行一次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>

如何将两个函数应用于li

5 个答案: