Question

我正在使用bootstrap3和fontawesome。我有以下HTML：

@SafeVarargs
public static Set<String> commaSeparatedToSet(String str, Function<String, String>... functions) {
    if (str != null) {
        Stream<String> stream = Stream.of(str.split(",", -1))
                .filter(item -> StringUtils.isNotBlank(item))
                .map((elem) -> elem.trim());
        if (functions != null) {
            for (Function<String, String> function : functions) {
                stream.map(function);
            }
        }
        return stream
                .collect(Collectors.toSet());
    } else {
        return Collections.emptySet();
    }
}

使用后续CSS：

<label for="foo" class='radio btn'>
    <input type="radio" id='foo' name='foo[]'>
    <span></span>
    Foo
</label>

但是，我想在单击标签时更改标签的背景。我看不到使用CSS做到这一点的方法，所以我尝试了jQuery：

label.radio {background: #e8e8e8;font-size: 25px;text-align: center;width: 100%;padding-top: 30px;padding-bottom: 30px;}
label.radio.active {background:#f00;}
label.radio > input {display: none;}
label.radio > input+span:after {font-family: FontAwesome;content:"\f00d";}
label.radio > input:checked+span:after {font-family: FontAwesome;content:"\f00c";}

但是$("label.radio").click(function (evt) { $(this).toggleClass("active") })函数会触发两次。

我该如何实现？

Answer 1

您可以使用复选框更改事件来更改标签的颜色。

<label for="foo" id="fooLabel" class='radio btn'>
    <input type="radio" id='foo' name='foo[]'>
    <span></span>
    Foo
</label>

$('#foo').change(function() {
     $('#fooLabel').toggleClass("active")        
});

更改Label.BTN的颜色

1 个答案: