Drehen Sie nur diese div .. nicht andere

Möchten Sie div 45 Grad bei jedem Klick drehen. Es funktioniert wie erwartet. Ich habe 3 '.expand-btn' Klassenname auf dieser Seite. Was passiert, beim Klick löst es auf allen .expand-btn aus.Drehen Sie nur diese div .. nicht andere

Ich möchte nur auf diese 'expand-btn' auslösen. keine anderen.

JS:

var _rotation = 0; 

$.fn.rotate = function(degrees) { 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
}; 

$('.expand-btn').click(function() { 
    _rotation += 45; 
    $(this).rotate(_rotation); 
});

HTML:

<div class="expand-btn" id="test1"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test2"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test3"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div>

Quelle

2017-05-23 TDG

sollte wegen diesem Zusammenhang arbeiten .. – guradio

Es funktioniert nicht, weil eine einzige '_rotation' Variable für alle 3 .. –

'href =" javascript: void (0) "' ist ein sehr altes und sehr [schlechtes Anti-Muster] (https://stackoverflow.com/a/1293130/778975). Die 'javascript:' pseudo-URLs waren [zum Erstellen von Bookmarklets gedacht] (http://javascriptexample.net/badjs01.php) und sollten nicht beim Page Scripting verwendet werden. Du könntest davon profitieren, einen Blogpost zu lesen, den ich kürzlich über [das Aufspüren von schlechten JS Tutorials] geschrieben habe (http://www.uselesscode.org/blog/posts/spotting-bad-javascript-tutorials/). –

Sie benötigen würde für jedes der Objekte eine deutliche Lagerung des Rotationswert haben. Sie könnten z.B. verwenden jQuery.data() dafür:

$.fn.rotate = function(delta) { 
    // get the current stored rotation, or 0 if none was currently stored 
    var degrees = $(this).data().rotation || 0; 

    // add the delta to this value 
    degrees += delta; 

    // store the new value with the object 
    $(this).data().rotation = degrees; 

    // set the transformation 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
}; 

$('.expand-btn').click(function() { 
    $(this).rotate(45); 
});

zu erweitern ein jQuery richtig eingestellt, sollten Sie über die Elemente des Satzes durchlaufen und den Code für jedes der einzeln anzuwenden. Die Art, wie $.fn.rotate jetzt geschrieben wird, wird die Rotation aller Elemente in der Menge basierend auf dem Wert der ersten festlegen.

Oder analysieren Sie die aktuelle transform, um diesen tatsächlichen Wert abzurufen.

Quelle

2017-05-23 04:18:56

Sie können dem div ein Datenattribut hinzufügen, in dem Sie den aktuellen Winkel speichern können.

HTML:

<div class="expand-btn" id="test1" data-degrees="0"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test2" data-degrees="0"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test3" data-degrees="0"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div>

JS:

$(document).ready(function(){ 
    $('.expand-btn').click(function() { 
     var currentDegrees = $(this).data("degrees"); 
     currentDegrees += 15; 
     $(this).css({'transform' : 'rotate(' + currentDegrees + 'deg)'}); 
     var currentDegrees = $(this).data("degrees", currentDegrees); 
    }); 
});

Beispiel: https://jsfiddle.net/tejsoft/dwxb1a1b/

Quelle

2017-05-23 04:29:27 TejSoft

Drehen Sie nur diese div .. nicht andere

Antwort

Verwandte Themen