Toggle element der Klasse ID

Ich versuche, die Klasse zu wechseln von einem element, wenn es angeklickt wird, von einem Wert A zu Wert B und dann von Wert B wieder auf den Wert Ein, wenn es klickte ein zweites mal. Ich fand einige code hier, die mir erlaubt, es zu ändern einmal, aber kein zweites mal. (Siehe original -hier).

Hier ist der original code:

<script type="text/javascript">
  function changeClass() {
    document.getElementById("MyElement").className += " MyClass";
    document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
  }
</script>

Und hier ist mein code:

<script type="text/javascript">
  function changeClass() {
    if (document.getElementByID("arrow").className == "arrowdown") {
      document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
    }
    elseif(document.getElementByID("arrow").className == "arrowup") {
      document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
    }
  }
</script>
  • Sie hat diese Frage mit jQuery? Warum sind Sie nicht, es zu benutzen?
  • jQuery hat diese.
InformationsquelleAutor jmalais | 2012-09-21
  1. 3
    $('#arrow').toggleClass('arrowup arrowdown');
    • $('#arrow').toggleClass('arrowdown').toggleClass('arrowup'); ah, es funktioniert! und seine jquery... danke.
    • $('#arrow').toogleClass('arrowdown arrowup')
    • das wird nicht funktionieren, wenn Sie wiederholt ein-und ausgeschaltet. es scheint, die Klasse zu halten und als "arrowdown arrowup'
    • wie es aussieht, funktioniert es, aber ich kann nicht scheinen, um es an die Arbeit in diesem format auf meiner Seite.
    InformationsquelleAutor Danil Speransky
  2. 0

    Warum nicht einfach jQuery verwenden toggleClass statt zusammen mit einem id-Selektor?

       $('#arrow').toggleClass('arrowup');
   $('#arrow').toggleClass('arrowdown');

    Und sparen Sie sich das Debuggen und ein paar Zeilen code!

    InformationsquelleAutor pdeschen
  3. 0

    Überprüfen Sie diese FIDDLE

    Seine viel einfacher mit JQuery..

    $(function() {
    var i = 0;
    $('div').on('click', function() {
       i++;
        if( i % 2 == 0){
            $(this).addClass('arrowup').removeClass('arrowdown');
        }
        else{
            $(this).addClass('arrowdown').removeClass('arrowup');
        }
    });
});​
    InformationsquelleAutor Sushanth --
  4. 0

    nur die jquery addClass() und removeClass() oder noch besser die toggleClass in Ihrem click-Ereignis

    <div id="elemID" class="class1">
</div>


function changeClass()
{
    $("#elemID").toggleClass("class1");
    $("#elemID").toggleClass("class2");  
}

    REF

    http://api.jquery.com/addClass/

    http://api.jquery.com/removeClass/

    http://api.jquery.com/toggleClass/

    Cheers

    InformationsquelleAutor André Pedroso
  5. 0

    Stand ich etwas ähnliches wie heute. In meinem code für jede Funktion der user würde seine Meinung Ausdrücken durch drücken von Daumen hoch oder Daumen runter. Die ausgewählten Daumen-Symbol hätte eine hellere Farbe, so dass, wenn der Benutzer klicken Sie auf das Daumen hoch Symbol, das Daumen hoch-Symbol würde grün und die Daumen nach unten-Symbol (wenn Sie es waren grüne) wäre schwarz.

    Löste ich es mit jQuery:

    $(document).ready(function () {
            $('#vote-yes-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('true');

                $('#1vote-yes-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-no-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
            $('#vote-no-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('false');

                $('#1vote-no-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-yes-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
        });
    InformationsquelleAutor Krisi Suci
Schreibe einen Kommentar