Jquery - den HTML-Inhalt von zwei DIVs vertauschen

Question

Ich habe Probleme, diese Methode des Tauschens zu bekommen, indem ich eine 'jede' Schleife benutze, nachdem eine Taste gedrückt wurde.

Die Schleife iteriert, aber Text geht nicht wie gedacht.

vielleicht verwende ich die falsche Methode der Zuordnung von HTML zu diesen getaggten divs ?.

$(function() { 
 
    $('.direction-toggle').click(function() { 
 
    $(this).toggleClass('off'); 
 
    $("#CW").each(function(i, el) { 
 
     if ($(el).html() == "↺") { 
 
     $(el).html("↻"); 
 
     } else if ($(el).html() == "↻") { 
 
     $(el).html("↺"); 
 
     } 
 
    }); 
 
    }); 
 
});

.direction-toggle { 
 
    margin: auto; 
 
    width: 30px; 
 
    background: white; 
 
    cursor: pointer; 
 
    border: 2px solid black; 
 
    border-right-width: 15px; 
 
    padding: 0 5px; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    transition: all .5s ease; 
 
} 
 
.direction-toggle.off { 
 
    background: rgba(200, 230, 255, 1); 
 
    border-right-width: 2px; 
 
    border-left-width: 15px; 
 
} 
 
#CW, 
 
#CCW { 
 
    float: right; 
 
}

<div class="twist-left">&#65513; R 1 
 
    <div id="CCW" class="direct">&#8634;</div> 
 
    <div class=""> 
 
    </div> 
 
</div> 
 
<div class="twist-right">L 1 
 
    <div id="CW" class="direct">&#8635;</div>&#65515; 
 
    <div class=""> 
 
    </div> 
 
</div> 
 

 
<div class="direction-toggle"> 
 
    &nbsp; 
 
</div>

http://jsfiddle.net/wJftm/1/

Answer 1

Wenn ich Sie richtig verstehe, verwenden Sie diesen Code:

$(function() { 
    $('.direction-toggle').click(function() { 
    $(this).toggleClass('off'); 
    var twistLeftHtml = $('.twist-left').html(); 
    var twistRightHtml = $('.twist-right').html(); 
    $('.twist-left').html(twistRightHtml); 
    $('.twist-right').html(twistLeftHtml); 
    }); 
}); 

Oder diese:

$('.direction-toggle').click(function() { 
    $(this).toggleClass('off'); 
    var twistLeftDirectHtml = $('.twist-left .direct').html(); 
    var twistRightDirectHtml = $('.twist-right .direct').html(); 
    $('.twist-left .direct').html(twistRightDirectHtml); 
    $('.twist-right .direct').html(twistLeftDirectHtml); 
}); 

Und denken Sie daran, dass das Attribut id in DOM eindeutig sein muss. Die Auswahl nach der ID $('#CW') gibt nur das erste übereinstimmende Element zurück.

JSFiddle