Schaltflächenthema beim Drücken ändern

Question

Ich versuche, das Datenthema einer Schaltfläche zu ändern, wenn diese gedrückt wird.

Ich rufe diese JavaScript-Funktion im onClick-Handler der Schaltfläche auf:

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

aber das Thema ändert sich nicht. Irgendwelche Ideen?

Answer 1

Sobald Sie das Thema für die Schaltfläche festgelegt haben, müssen Sie "refresh" wie folgt aufrufen...

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

Wenn Sie diese Art von Verhalten an alle "Weiter"-Schaltflächen in einem Prozess binden möchten und es könnte mehr als eine geben, dann sollten Sie sich überlegen, ob Sie nicht etwas Ähnliches machen wollen. Es wird auf jeder Seite nach einer Schaltfläche mit der Klasse colorChangeButton gesucht, und wenn sie angeklickt wird, wird das Thema auf das alternative Thema geändert, das im Attribut data-theme-pressed der Schaltfläche angegeben ist.

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

Answer 2

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

Wenn Sie jQuery verwenden, ist dies Ihr Code.