JQuery replaceWith() 仅在 if 条件下工作一次

Question

我正在尝试使用 JQuery replaceWith() 方法根据文本框中的条件替换一些 html。但它只会工作一次，无论文本框的值如何，它总是 return 是相同的消息 "Replacement Effective"，这是我在下面的 if-else 语句中的第一个值。我需要它 return 基于文本框值的不同消息。

我的html如下：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    jQuery(function ($) {
        function changeCAT() {
            var choice = $('#choice').val()
            if (choice = 'Effectiveness') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Effective!</div>'); }
            else if (choice = 'Safety') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Safe!</div>'); }
            else if (choice = 'Efficiency') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Efficient!</div>'); }
            else { alert('Please make a valid choice'); }
        };
        $('#btn').click(changeCAT);
    });

</script>
</head>
<body>
<form>
<select id="choice">
    <option value="effectiveness">Effectiveness</option>
    <option value="safety">Safety</option>
    <option value="efficiency">Efficiency</option>
</select>
<input id="btn" type="button" value="Change Div"></form>
<div id="avg_scores">
    Original Div</div>
</body>
</html>

Answer 1

应该使用双等号 == 进行比较，而不是单等号 = 这是一个赋值，而不是在如下 if 条件下的比较：

jQuery(function($) {

  function changeCAT() {

    var choice = $('#choice').val()

    if (choice == 'effectiveness') {
      $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Effective!</div>');
    } else if (choice == 'safety') {
      $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Safe!</div>');
    } else if (choice == 'efficiency') {
      $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Efficient!</div>');
    } else {
      alert('Please make a valid choice');
    }
  }

  $('#btn').click(changeCAT);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choice">
  <option value="effectiveness">Effectiveness</option>
  <option value="safety">Safety</option>
  <option value="efficiency">Efficiency</option>
</select>
<input id="btn" type="button" value="Change Div" />
<div id="avg_scores">Original Div</div>

Answer 2

请使用 == 而不是 = 运算符，并且您在检查时需要注意区分大小写，而不是 'Effectiveness' 在您的 if 条件中使用 'effectiveness'。

jQuery(function ($) {
    function changeCAT() {
        var choice = $('#choice').val()
        if (choice == 'effectiveness') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Effective!</div>'); }
        else if (choice == 'safety') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Safe!</div>'); }
        else if (choice == 'efficiency') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Efficient!</div>'); }
        else { alert('Please make a valid choice'); }
    };
    $('#btn').click(changeCAT);
});

Answer 3

  jQuery(function ($) {
    function changeCAT() {
        var choice = $('#choice').val()
        if (choice == 'effectiveness') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Effective!</div>'); }
        else if (choice == 'safety') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Safe!</div>'); }
        else if (choice == 'efficiency') { $('#avg_scores').replaceWith('<div id = "avg_scores">Replacement Efficient!</div>'); }
        else { alert('Please make a valid choice'); }
    };
    $('#btn').click(changeCAT);
});

对comparasion使用==，对assifnment使用=。还将其与选项值属性

进行比较

JQuery replaceWith() 仅在 if 条件下工作一次

JQuery replaceWith() only work once in if condition

jquery

replacewith