javascript - 如何删除以前边框的元素

Question

我有这个简短的例子:

link

<fieldset id="packType">
    <label>1</label>
    <label>2</label>
    <label>3</label>
</fieldset>

$("#packType label").on("click", function(e) {
    $(this).css({ "border": "2px solid #ff4141" });
});

我只想在您单击的元素上应用红色边框，其余元素应该有 border: none;。我怎样才能做到这一点？你能帮帮我吗？

Answer 1

你可以这样做

var $lbl = $("#packType label").on("click", function(e) {
  $lbl.css("border", "none");
  // set border none to all elements
  $(this).css("border", "2px solid #ff4141");
  // set border to clicked element
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset id="packType">
  <label>1</label>
  <label>2</label>
  <label>3</label>
</fieldset>

或使用 siblings() , 选择元素的 sibling

$("#packType label").on("click", function(e) {
  $(this).css("border", "2px solid #ff4141")
  //set border to clicked element
    .siblings().css("border", "none");
    // set border none to all siblings of clicked element
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset id="packType">
  <label>1</label>
  <label>2</label>
  <label>3</label>
</fieldset>