Drehen eines Bildes mit jQuery mit 2 Tasten

Question

ich versucht haben, um 90 Grad um ein Bild zu drehen, wenn auf der rechten Taste und drehen Sie es um -90 geklickt, wenn Sie auf die -Taste nach links. Mein Code ist hier. Ich versuche, eine Art einer Schleife mit einem Zähler auf 0 gesetzt und durch die und sonst Aussagen . aber ich habe es nicht zu arbeiten:

HTML:

<button id="left" class="button">left</button> 
<img src="images/cartoon.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate"> 
<button id="right" class="button">right</button> 

CSS:

#draaien { 

} 

jQuery:

$(document).ready(function(){ 

var counter = 0; 
$("#left").click(function(){ 
if (counter == 0){ 
$("#rotate").css({ 
    "-webkit-transform": "rotate(-90deg)", 
    "-moz-transform": "rotate(-90deg)", 
    "transform": "rotate(-90deg)" 
    teller +=1; 
}); 
counter=0; 

$("#rotate").css({ 
} 

}else if($("#right").click()){ 
$("#rotate").css({ 
    "-webkit-transform": "rotate(90deg)", 
    "-moz-transform": "rotate(90deg)", 
    "transform": "rotate(90deg)" 

} 
}); 
}); 
}); 

Im Grunde war ich try ng, um eine Art Zähler zu erstellen, der beim Klicken auf "links" um 1 erhöht wird und die verschiedenen CSS-Elemente so hinzufügt, dass sie nach links drehen und um -1 nach rechts drehen kann (+90) scheint keine Wirkung zu haben. Vielen Dank!

Answer 1

Wenn ich verstehe, möchten Sie eine Variable festlegen, um die Grad-Kurve zu verfolgen und 90 wenn rechts hinzufügen, und subtrahieren 90 wenn links.

$(document).ready(function() { 
 
    var deg = 0; 
 

 
    $(".button").on("click", function() { 
 
    if ($(this).is("#left")) { 
 
     deg = deg - 90; 
 
    } else { 
 
     deg = deg + 90; 
 
    } 
 
    $("#rotate").css({ 
 
     "-webkit-transform": "rotate(" + deg + "deg)", 
 
     "-moz-transform": "rotate(" + deg + "deg)", 
 
     transform: "rotate(" + deg + "deg)" 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="left" class="button">left</button> 
 
<img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate"> 
 
<button id="right" class="button">right</button>

Answer 2

Ihr Gedanke war richtig, einen Zähler Abnahme eingestellt wird, wenn drehen kehrt links und umge, aber es gibt einige Syntaxfehler in der von Ihnen angegebenen Beispiel. $("#rotate").css({ "-webkit-transform": "rotate(-90deg)", "-moz-transform": "rotate(-90deg)", "transform": "rotate(-90deg)" teller +=1; });

taller += 1; war eine Aussage, sie sollte nicht innerhalb eines Objekts erscheinen. Objekte sind Schlüssel, Wertepaare, getrennt durch Doppelpunkt und durch Komma verbinden.

}else if($("#right").click()){

$("#right").click() ist ein Verfahren zur Herstellung einer Ereignisbehandlungsroutine Funktionsparameter akzeptiert Ereignisbehandlungsroutinen auf dem Element zu binden klicken, ist es die jQuery Objekt zurückgibt.

$("#rotate").css({ } und dies würde css auf dem Element nicht klar.

schrieb ich ein einfaches Beispiel hier: https://jsfiddle.net/yzjk4v37/

gibt es zwei Tasten steuert den Block machen drehen nach links oder rechts

Answer 3

Try this, der Punkt ist, es ist eine 360-Grad-Drehung, so dass Sie wissen müssen, wie viel wird derzeit gedreht und wie weit es gehen sollte,

$(document).ready(function(){ 
 
    $("#left").click(function(){ 
 
     rotate("#rotate",-90) 
 
    }); 
 
     
 
     $("#right").click(function(){ 
 
     rotate("#rotate",90); 
 
    }); 
 

 
}); 
 

 
function rotate(whom,angle) 
 
{ 
 
    var rv=$(whom).prop("data-rot")?$(whom).prop("data-rot"):0; 
 
    rv=rv+1; 
 
    n=rv*angle; 
 
    if(Math.abs(n)>=360){n=0;rv=0;} 
 
    
 
    $(whom).css({ 
 
     "-webkit-transform": "rotate(" + n + "deg)", 
 
     "-moz-transform": "rotate(" + n + "deg)", 
 
     "transform": "rotate(" + n + "deg)" 
 
    }); 
 
     
 
    $(whom).prop("data-rot",rv); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="left" class="button">left</button> 
 
<img src="https://cdn.livechatinc.com/s3/default/eyeCatchers/049.png" alt="Cartoon" style="width:304px;height:228px;" id="rotate"> 
 
<button id="right" class="button">right</button>