Question

我在单击按钮时遇到问题。在下面的代码中，当我单击按钮时，条件将检查按钮的文本是否等于“ day”，然后将“ body”的“ background-color”更改为“ red”，还将“ body”的“ text”更改为按钮”到“晚上”。在这里，如果单击带有夜间文本的按钮，我想再次将主体背景颜色和按钮文本更改为第一个。我对此感到非常困惑。

enum

var buttonText = $('button').text();

$('button').click(function() {
  if (buttonText == 'day') {
    $('body').css({
      'background': 'red'
    })
    $('button').text('night');
  } else if (buttonText == 'night') {
    $('body').css({
      'background': 'yellow'
    })
  }
})

Answer 1

您需要在事件处理程序中声明您的buttonText变量，或者始终具有脚本开始时的值。

此外，在else块中缺少将文本设置回“ day”的功能。

$('button').click(function() {
  var buttonText = $('button').text();

  if (buttonText == 'day') {
    $('body').css({
      'background': 'red'
    })
    $('button').text('night');
  } else if (buttonText == 'night') {
    $('body').css({
      'background': 'yellow'
    });
    $('button').text('day');
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="training.css">
</head>

<body>
  <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <button type="button" name="button">day</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
  <script src="training.js" charset="utf-8"></script>
</body>

</html>

Answer 2

这里有很多编程从根本上来说是个坏主意。您应该避免使用应基于表示形式（html值）的逻辑。您还应避免对html元素进行值更改（css）。

相反，您的逻辑应该基于元素的类，并且您的表示也应该基于类。

请阅读Decoupling Your HTML, CSS, and JavaScript。

$('.js-update').click(function(e) {
  var $btn = $(e.currentTarget);  // button clicked
  var addClass = $btn.data('addclass');
  var removeClass = $btn.data('removeclass');
  var target = $btn.data('target');
  $(target).addClass(addClass).removeClass(removeClass);
})

.day {
  background: red;
}
.night {
  background: yellow;
}

.day .btn-day,
.night .btn-night {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="training.css">
    </head>
    <body class="day">
        <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <button class="js-update btn-day"type="button" name="button" data-target="body" data-addclass="day" data-removeclass="night">day</button>
        <button class="js-update btn-night" type="button" name="button" data-target="body" data-addclass="night" data-removeclass="day">night</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
        
    </body>
</html>

Answer 3

在方法内部移动按钮文本引用

Collection<String> additionalValues = Arrays.asList("X","Y","Z"); // or set or whatever
if (attributes.contains("*")) {
    attributes.remove("*");
    attributes.addAll(additionalValues);
}

Answer 4

您仅一次将按钮文本输入到变量中，因此只能获得初始状态。对于更改按钮，每次单击按钮时（即在单击处理程序内部），都必须获取按钮文本。

$('button').click(function() { 
    var buttonText= $('button').text(); //get button text each time you click the button
    if (buttonText=='day') { 
        $('body').css({ 'background':'red' }) 
        $('button').text('night');
    } else if (buttonText=='night') { 
        $('body').css({ 'background':'yellow' }) 
    } 
})

否则，如果没有在单击jQuery上运行语句

4 个答案: