Question

我有一点问题，我无法弄清楚它是从哪里来的。我正在使用jQuery UI（当然还有jQuery）

我有以下HTML：

   <input type="checkbox" id="test" value="test"/>
    <label for="test">Show Test</label>
    <div id="checkedDiv"></div>

以及以下JS：

function clickChange() {
    var currentText = this.nextSibling.innerHTML;
    this.nextSibling.innerHTML = 
    (this.checked) ? currentText.replace("Show","Hide") :
                     currentText.replace("Hide", "Show");
    $("#checkedDiv").text(this.nextSibling.innerHTML);
}

var test=document.getElementById("test")
test.onclick=clickChange;
$("#test").button();

问题是第一次点击时，innerHTML不会改变。之后它才有效。更令人失望的是，nextSibling似乎发生了变化（至少从#checkedDiv中看到的变化），但是没有出现在firefox / firebug上的DOM Tree上。

我错过了什么吗？

由于（如果你想自己尝试一下，就在这里：http://jsfiddle.net/nvNKW/3/）

修改

（或至少一种）解决方案是使用Aziz Shaikh建议的标签：

function clickChange() {
    var currentText = $(this).button( "option","label");
    $(this).button( "option","label",(this.checked)? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show"));
}

并且无需更改html或按钮初始化。

Answer 1

尝试使用$("#test").button({ label: newText });代替this.nextSibling.innerHTML

设置标签

编辑：所以你的固定JS函数是：

function clickChange() {
    var currentText = this.nextSibling.firstChild.innerHTML;
    var newText = (this.checked) ? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show");
    $("#test").button("option", "label", newText);
    $("#checkedDiv").text(this.nextSibling.innerHTML);
}

Answer 2

这是因为nextSibling()也返回文本节点。您正在更改输入后的空白空格，而不是下一个标记。

jQuery让它变得简单，做到了

$(this).next('label').html()

Jquery Ui中的按钮在更改Label时遇到了一些问题

2 个答案: