Question

作为一个新手，我正试图取消一些东西而且已经卡住了。我正在尝试选择id为“fc_cart_foot_tax_tbd”的表格行，如果某人进入伊利诺伊州以外的州，进入类别为“customer_state_name”的输入字段，则添加“选定”类。这是我的HTML不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Basic</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    //Show the tax info if the shipping state is not Illinois
        $("#customer_state_name").each(function()
        {
            if (!$(this).html() == 'Illinois')
            {
            $("#fc_cart_foot_tax_tbd").addClass("selected");
            }
        });
    });
    </script>
    </head>
    <body>

    <form action="#">
    <input name="state" id="customer_state_name" value="" />
    </form>

    <table>
    <tr id="fc_cart_foot_tax_tbd">
    <td>Content here!</td>
    </tr>
    </table>

    </body>
    </html>

Answer 1

if ($(this).val() != 'Illinois') ...

一元否定运算符的优先级高于您的预期。

此外，.each()没有理由$('#...')，因为只有一个具有特定id属性的元素在同一文档中才合法。您应该使用CSS类，或者您可以简单地使用：

if ($('#customer_state_name').val() != 'Illinois') ...

没有外部.each()包装。

Answer 2

正确的几个问题。

您在ID上使用.each()功能。 ID必须在文档中是唯一的，如果有多个项目，则使用类。
您正在使用$(this).html()获取<input>字段的值，而是使用.val()。
您只有在进入页面时执行一次的代码，您需要在.change()上创建<input>函数，以便每次用户更改它时都会运行。
您使用(!a == b)作为您的条件，这不是您想要的，您应该使用不等于(a != b)。

<强> jQuery的：

$(document).ready(function() {
  $(".customer_state_name").change(function() {
    if ($(this).val() != 'Illinois') {
      $("#fc_cart_foot_tax_tbd").addClass("fc_cart_foot_tax_tbd");
    } else {
      $("#fc_cart_foot_tax_tbd").removeClass("fc_cart_foot_tax_tbd");
    }
  });
});

<强> HTML：

<form action="#">
    <input name="state" class="customer_state_name" value="" />
</form>

<table>
    <tr id="fc_cart_foot_tax_tbd">
        <td>Content here!</td>
    </tr>
</table>

Answer 3

我意识到这已经得到了解答，但我想指出你应该做些什么来解释正确/更低/更高的套管。假设您的用户已设置大写锁定。假设他们没有正确的情况。假设他们不小心撞到了空格键。我认为这段代码可以更好地用于您的目的。它会强制使用正确的大小写并修剪文本框的值。此外，如果不满足条件“Illinois”，您需要确保删除该类。请在JSFiddle上尝试以下代码。

$(function() {
  $("#customer_state_name").change(function() {
      var stateName = $(this).val().split(" ");
      var stateProper = new Array();
      for(x in stateName){         
          stateProper.push(stateName[x].charAt(0).toUpperCase() + stateName[x].substr(1).toLowerCase());
      }
      var stateProper=stateProper.join(" ").trim();
      $(this).val(stateProper);
    if($(this).val() != 'Illinois') {
      $("#fc_cart_foot_tax_tbd").addClass("selected");
    }
      else{
      $("#fc_cart_foot_tax_tbd").removeClass("selected");    
      }
  });
});

jQuery - 如果输入与值不匹配，如何选择另一个tr

3 个答案: