ラベルの変更に問題があるJquery Uiのボタン

Question

私は少し問題があり、どこから来たのか分かりません。 私は、次のHTML持っているのjQuery UI（もちろんjQueryの）

を使用しています：

<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ツリーには表示されません。

何か不足していますか？

おかげ （あなたはそれを自分で試してみたい場合は、それはここにある：http://jsfiddle.net/nvNKW/3/）

EDIT：

（または少なくとも1）ソリューションは、アジズシェイクにより示唆されるようにラベルを使用することです。

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

ではなくthis.nextSibling.innerHTML

編集の$("#test").button({ label: newText });を使用してラベルを設定してみてください：だからあなたの固定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()