Question

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

我的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

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

＆＃13;

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);

});

＆＃13;

<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>

＆＃13;

Answer 2

请使用==而不是=运算符，并且您还需要在检查时处理区分大小写，而不是在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);
});

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＆amp; = assifnment。还将其与选项值属性

进行比较

JQuery replaceWith（）只在if条件下工作一次

3 个答案: