Как удалить элемент ранее границы

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(), чтобы выбрать другой элемент и установить соответствующую границу в none.

$("#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 к текущей метке щелчка.

Для получения желаемого результата различные интерфейсы могут быть использованы т.е. .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>