如何删除一个项目之前的边界

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()，它选择的元素的兄弟姐妹

$("#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>

Answer 2

您可以设置边界点击元素并使用.siblings()选择器选择其他元素并将相应的边框设置为无。

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

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

Answer 3

如果没有在标签上没有其他的风格，那么你可以删除的样式属性完全使用：

$(this).css({ "border": "2px solid #ff4141" }) 
     .siblings('label').removeAttr('style'); // will clean the style attribute. 

如果您需要使用其他的风格，只是针对边框被删除使用此：

$(this).css({ "border": "2px solid #ff4141" }) 
     .siblings('label').css('border','none'); // will remove borders. 

Answer 4

您应该创建一个CSS类，将CSS类添加到当前点击的标签。

为了得到期望的结果各种API可以即.siblings()，addClass()和removeClass()

$("#packType label").on("click", function(e) { 
 
    $(this).addClass('withBorder').siblings().removeClass('withBorder'); 
 
});

.withBorder { 
 
    border: 2px solid #ff4141; 
 
}

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