Jquery Ui 中的按钮在更改标签时出现一些问题

发布于 2024-11-16 22:43:15 字数 1276 浏览 3 评论 0原文

我有一个小问题，我不知道它从哪里来。我正在使用 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 树上。

我错过了什么吗？

谢谢（如果您想自己尝试一下，请访问：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 或按钮初始化。

原文

I have a little problem, and I can't figure out where does it come from.
I'm using jQuery UI (and of course jQuery)

I have the following HTML:

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

and the following 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();

The problem is that on the first click, the innerHTML doesn't change. After that it works.
And to be a little more disappointed, the nextSibling seems to change (at least from what is seen in the #checkedDiv), but doesn't appear on the DOM Tree on firefox/firebug.

Am I missing something ?

Thanks
(if you want to try it yourself, it's here: http://jsfiddle.net/nvNKW/3/ )

EDIT:

The (or at least one) solution is to use label as suggested by Aziz Shaikh:

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

And there is no need to change the html or the button initialisation.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怀里藏娇 2024-11-23 22:43:15

尝试使用 $("#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);
}

Try setting the label using $("#test").button({ label: newText }); instead of this.nextSibling.innerHTML

Edit: So your fixed JS function would be:

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 原文