javascript - 如果不尊重即使内在值(value)也是错误的

Question

这是我的 HTML 代码:

$(function() {
  function reverse(s) {
    return s.split("").reverse().join("");
  }

  $('button').click(function() {
    var span = $(this).siblings('span');
    span.text(function() {
      var reversed = reverse($(this).text());
      return reversed;
    });

    if (!span.children('small').length) {
      span.wrapInner('<small></small>');
      console.log(!span.children('small').length);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span>reverse1</span>
<span>reverse2</span>
<button>reverse me</button>

我将 console.log 放入 if 语句中，以便在 DOM 中仅添加一次小节点(不确定 wrapInner 函数)，检查小节点是否仅添加一次。我检查了逻辑表达式中的值，如果没有小标签，则为 true；如果添加了小标签，则为 false。谁能帮我理解一下？

Answer 1

我已经更新了我的代码，以在您的跨度内创建一个小跨度(如果不存在)，并将跨度的文本内容放置在该小跨度内。它仅在第一遍时创建较小的值。所有后续 channel 都只需清空小孔并重新填充即可。我真的不需要清空 IF 语句中的小值，只需证明您可以以任何一种方式使用它。

$(function() {
  function reverse(s) {
    return s.split("").reverse().join("");
  }
  // When the button el is clicked, reverse
  $('button').click(function() {
    var span = $(this).siblings('span');

    span.each(function() {
      // Store the text string, regardless of DOM
      var textStr = $(this).text();

      if (!$(this).children("small").length) {
        // I don't have a nested small. Make one!
        //  Note that, in making one, I wipe out any
        //  content in this span element.
        console.log("No small!");
        $(this).html("<small></small");
      } else {
        // I have a small. Don't wipe the entire contents
        //   of this span, simply empty the small.
        console.log("Has small!");
        $(this).children("small").empty();
      };
      
      // Either way, I now have a span with an empty small.
      //  Stick my text in there!
      $(this).children("small").text(reverse(textStr));
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>reverse1</span>
  <span>reverse2</span>
  <button>reverse me</button>
</div>