jquery-ui - 使用 jquery ui 按钮切换更改文本（标签）

Question

我有一个 jquery-ui 按钮，我知道如何使用 css 更改状态之间的样式，但我也想知道如何更改标签文本。例如，如下所示的 ON/OFF 按钮——当 [checked="checked"] 时，标签文本将 = "ON"（未选中时为 OFF）。

<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>

任何帮助都将是巨大的。谢谢。

Answer 1

这是解决方案：

$('#device_4_state').change(function(){
    if ($("#device_4_state").is(':checked'))
    {
        $("label[for='device_4_state']").text("ON");
    }
    else
    {
        $("label[for='device_4_state']").text("OFF");
    }

});

Answer 2

如果希望使用纯 CSS 设置标签文本，可以使用 CSS 伪元素根据 jquery-ui 按钮的状态自动生成标签的内容。要使用这种方法，请将标签留空 ( <label for="device_4_state"></label>) 并包含如下 CSS：

.on-off + label > span:before {
    content: "OFF";
}
.on-off + label.ui-state-active > span:before {
    content: "ON";
}

正如在这个jsfiddle：http: //jsfiddle.net/GjPXZ/1/