Question

我对jquery很新。本质上，当我点击“a”时，我想让“a”保持不同的颜色和大小，直到点击“b”。点击“b”时，我想让“b”保持不同的颜色和大小，直到再次点击“a”。几乎像一个切换效果，但在两个元素之间交替 - 它相当简单，我只是想不出来。在此先感谢您的帮助。

$("#letter-a, #letter-b").click(function() {
  css('color','#f49242'), css('font-size','14px');
});

#letter-a, #letter-b {
  float: left;
  color: #03f;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-a">
a
</div>
<div id="letter-b">
b
</div>

Answer 1

您需要在单击的元素上调用css()方法。为此，您将this对象传递给JQuery并在该包装的set对象上调用css方法。所以：

css('color','#f49242'), css('font-size','14px');

应该是：

$(this).css('color','#f49242').css('font-size','14px');

或者，当您有多个css属性要更改时，.css()方法允许您使用的更精简版本：

$(this).css({'color':'#f49242', 'font-size':'14px'});

但是，真正更好的方法是提前设置两个CSS类并切换它们的使用。此外，div不是在span使用，而是更合适。

$(".normal").click(function() {
  $("span").removeClass("special");    // Reset all letters
  $(this).addClass("special");         // Apply special to just element that was clicked
});

/* This is applied in the HTML by default */
.normal {
  color: #03f;
  font-size: 12pt;
}

/* This will be applied as needed */
.special {
  color: #f49242;
  font-size: 14pt;
}

.clickable {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="normal clickable">a</span>
<span class="normal clickable">b</span>

在两个元素之间打开/关闭文本颜色

1 个答案: