Jquery

Question

我在按下按钮后使用 'each' 循环使这种交换方法起作用时遇到了问题。

循环迭代，但文本没有按预期执行。

也许我使用了错误的方法将 html 分配给这些标记的 div？

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

.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') 选择将 return 只有第一个匹配的元素。

JSFiddle

Jquery - 交换两个 DIV 的 html 内容

Jquery - swapping two DIV's html content

html

each

swap