JQuery - 2つのDIVのhtmlコンテンツを交換する

Question

ボタンを押した後に 'each'ループを使用して、このスワップ方法を使用するのに問題があります。

ループは反復しますが、テキストは考えられません。

おそらく私はこれらのタグ付きdivにhtmlを割り当てる間違った方法を使用していますか？

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

私が正しくあなたを理解していれば、このコードを使用します

$(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); 
    }); 
}); 

またはこの：

$('.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); 
}); 

を

そして、id属性はDOM内で一意でなければならないことに注意してください。 id $('#CW')による選択は、最初に一致した要素のみを返します。

JSFiddle