使用jQuery更改jQuery移动按钮的值

问题描述

想知道是否可以帮助我.我似乎在用jQuery更改jQuery Mobile按钮的文本时遇到问题.

Wondering if you can help me out. I seem to have a problem changing the text of my jQuery Mobile buttons with jQuery.

$("#myButton .ui-btn-text").text("New text");

上面建议用于相关问题的代码似乎无效.

Code above which was recommended for a related question doesn't seem to work.

都不:

$("#myButton").attr(value,"New Test");

我的按钮的代码如下:

<input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next"></button>

如果有任何反馈，我将不胜感激.谢谢

I'll appreciate any feedback guys. Thanks

推荐答案

更新2
我正在研究另一个问题，但我注意到jQuery Mobile 1.0b2的标记有些不同:

Update 2
I was working on a fiddle for another question and I noticed that the markup with jQuery Mobile 1.0b2 is a little different:

<div data-theme="b" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-b ui-btn-hover-b" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Show Submit Button</span>
    </span>

    <input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next" class="ui-btn-hidden" aria-disabled="false">
</div>

使用此标记，您需要执行以下操作来更改按钮的文本:

With this markup, you'd need to do the following to change the text for the button:

$('#myButton').prev('span').find('span.ui-btn-text').text("Next Text");

---

更新
应归功的信用额-事实证明，@ naugtur对这个问题的回答与我的修改完全相同，发布于之前我原来的答案.

---

Update
Credit where credit is due - As it turns out, @naugtur's answer to this question, which made exactly the same point as my edit, was posted before I got around to correcting my original answer.

我对jQuery Mobile不太熟悉，当我最初回答时，您在按钮上使用<input>的事实并未注册.这是我的最新答案，并提供了一个工作示例，展示了您可能的操作方法.

I'm not very familiar with jQuery Mobile and the fact that you were using an <input> for the button didn't register when I initially answered. Here's my updated answer with a working example showing how you might do it.

在<input type="button" />的情况下，jQuery Mobile似乎隐藏了<input>元素并创建了一个新的<a>元素，其样式类似于按钮.这就是为什么当您尝试使用<input>的ID作为选择器来获取和设置文本时，由于<span>没有您在屏幕上看到的文本，所以它不起作用的原因.生成的标记看起来像这样

In the case of an <input type="button" />, jQuery Mobile seems to hide the <input> element and creates a new <a> element that is styled to look like the button. This is why when you try to get and set the text by using the id of the <input> as the selector, it doesn't work since that <span> doesn't have the text that you see on screen. The generated markup looks something like this

<!-- This 'a' button is added dynamically by jQuery Mobile, for the input element that follows it -->
<a role="button" href="#" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">My Value</span>
    </span>
</a>

<input type="button" data-role="button" value="My Value" id="myButton" name="answer" class="ui-btn-hidden ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" tabindex="-1" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text"></span>
    </span>
</input>

我还没有尝试出足够多的例子来完全自信，但这应该可行

I haven't tried out enough examples to be completely confident, but this should work

$("#myButton").prev('a').find('span.ui-btn-text').text("New Text")

这是 一个有效的示例，展示了如何更改两种类型的按钮的文本 ( <a>和<input type="button">).

如果没有帮助，我不建议在<a>按钮上使用此按钮，因为没有id，而我的方法至少依赖于<a>对应于<input type="button" />出现在<input>元素之前.

I wouldn't recommend using this over <a> buttons if you can help it though since there isn't an id and my approach, at least, relies on the fact that the <a> corresponding to the <input type="button" /> appears just before the <input> element.

这篇关于使用jQuery更改jQuery移动按钮的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！