У кнопок в Jquery Ui возникли проблемы со сменой метки - PullRequest
Новая
       11

У кнопок в Jquery Ui возникли проблемы со сменой метки

0 голосов
/ 23 июня 2011

У меня небольшая проблема, и я не могу понять, откуда она взялась.Я использую 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), но не появляется в DOM Tree на firefox / firebug.

Я что-то упустил?

Спасибо (если вы хотите попробовать сами, это здесь: http://jsfiddle.net/nvNKW/3/)

РЕДАКТИРОВАТЬ:

(илипо крайней мере одно) решение состоит в том, чтобы использовать метку, предложенную Азизом Шейхом: 

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

И нет необходимости изменять html или инициализацию кнопки.

Ответы [ 2 ]

1 голос
/ 23 июня 2011

Попробуйте установить метку, используя $("#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);
}
0 голосов
/ 23 июня 2011

Это потому, что nextSibling() также возвращает текстовые узлы.Вы изменяете пустое пустое пространство после ввода, а не следующий тег.

jQuery облегчает выполнение, выполните 

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