当按下时更改按钮主题

Question

我正在尝试在按钮被按下时更改数据主题。

我在按钮的onClick处理程序中调用了此JavaScript函数：

function changeNextButtonColor() {
    var nextButton = document.getElementById('next');
    nextButton.setAttribute('data-theme', 'a');
}

但是主题没有改变，有什么建议吗？

- MataMix

---

你的代码是可以工作的，但可能出现了其他问题。JavaScript控制台（Web Inspector、Firebug、Dragonfly等）有什么提示？是否报告了任何错误？ - David Thomas

谢谢大家！也许不起作用是因为按钮是一个提交输入？<input type="submit" name="next" id="next" value="NEXT" class="navButton" onclick="changeNextButtonColor();" data-role="button" data-icon="arrow-r" data-theme="c" data-iconpos="right"> - MataMix

Answer 1

一旦您在按钮上设置了主题，您需要像下面这样调用“refresh”...

$("#next").attr("data-theme","a").button('refresh');

如果您想将此类行为绑定到流程中的所有“下一个”按钮，而且可能有多个按钮，则可以考虑使用以下方法。它将检查每个页面上是否有一个class属性为colorChangeButton的按钮，然后在单击按钮时，将主题更改为该按钮的data-theme-pressed属性指定的备用主题。

<a href="#" data-role="button" class="colorChangeButton" data-theme-pressed="a" data-theme="b">Next</a>

<script type='text/javascript'>
    $('div').live('pageinit', function(){
        $("a.colorChangeButton).click(function(){
           var $thisButton = $(this);
           $thisButton.attr("data-theme",$thisButton.attr("data-theme-pressed")).button('refresh');
        });
    });
</script>

- sgliser

Answer 2

function changeNextButtonColor() {
    $('#next').attr({'data-theme': 'a'});
}

如果您正在使用jQuery，这就是您的代码。

- Ryan Casas