Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Assignment Q1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style/style1.css" type="text/css" rel="stylesheet">
  <script>
    $(document).ready(function() {
      $('button').click(function() {
        var text = $(this).text();
        console.log(text);
        if (text == 'night') {
          $('body').css('background-color', 'black');
          $(this).text('day');
          console.log(text);
        } else {
          $('body').css('background-color', 'white');
          $(this).text('night');
          console.log(text);

        }
      });
    });
  </script>
</head>

<body>

  <button>
        night
    </button>

</body>

</html>

这里发生的事情是，当我第一次点击按钮时没有任何工作，但是从第二次点击病房开始，代码就按预期工作了。

我还检查了第一次使用的文本方法输出：

    night

    night

并且在第二次单击文本方法之后输出：

夜晚天天

无法理解这里发生了什么以及文本方法输出本身如何变化？

Answer 1

问题是button在HTML中看起来像这样：

  <button>
        night
    </button>

空白很重要 - 当你在按钮上调用.text时，你会得到所有按钮的文本内容，包括空格。

最初不要使用任何空格：

<button>night</button>

或者在结果.trim()上致电text：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Assignment Q1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style/style1.css" type="text/css" rel="stylesheet">
  <script>
    $(document).ready(function() {
      $('button').click(function() {
        var text = $(this).text();
        console.log(text);
        if (text.trim() == 'night') {
          $('body').css('background-color', 'black');
          $(this).text('day');
          console.log(text);
        } else {
          $('body').css('background-color', 'white');
          $(this).text('night');
          console.log(text);

        }
      });
    });
  </script>
</head>

<body>

      <button>
            night
        </button>

</body>

</html>

＆＃13;

Answer 2

问题是因为您从方法调用中收到的text()周围有空格，因此它与您正在比较的'night'字符串不匹配。

要解决此问题，请使用trim()删除该空白：

＆＃13;

$(function() {
  $('button').click(function() {
    var text = $(this).text().trim();
    if (text == 'night') {
      $('body').css('background-color', 'black');
      $(this).text('day');
    } else {
      $('body').css('background-color', 'white');
      $(this).text('night');
    }
    
    console.log(text);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>
  night
</button>

＆＃13;

另请注意，您可以通过使用类来设置样式来改进逻辑，然后toggleClass()：

＆＃13;

$(function() {
  $('button').click(function() {
    $('body').toggleClass('day night');
    $(this).text(function(i, t) {
      return t.trim() == 'night' ? 'day' : 'night';
    });
  });
});

＆＃13;

.night { background-color: #000; }
.day { background-color: #FFF; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="day">
  <button>
    night
  </button>
</body>

＆＃13;

使用文本方法获取元素的文本，然后检查条件但没有获得适当的输出

2 个答案: