Question

我想使用jquery中的addClass方法将类添加到我的输入标签中，但是在chrome中不起作用！

`
    $('#username-signup').blur(function() {

            var tempusername = $('#username-signup').val();

            $.ajax({
                type: "POST",
                url: "includes/identification.php",
                data: { username: tempusername },
                dataType: "text",
                success: function(response) {
                    //console.log('success');
                    if (response == 'n') {
                        //console.log('n');
                        $('#username-signup').removeClass('identication-y');
                        $('#username-signup').addClass('identication-n');

                    } else {
                        //console.log('else');
                        $('#username-signup').removeClass('identication-n');
                        $('#username-signup').addClass('identication-y');

                    }
                },
                error: function() {

                    //console.log('error');
                },
                timeout: 5000

            });



        });

//html code :

<input type="text" name="username" class="form-control" id="username-signup">



//css :

.identication-n {
    border-color: #ff3547;
}

.identication-y {
    border-color: limegreen;
}



//my php side code :


<?php 
  $x = 'n';
  echo $x;
?>
`

怎么回事？ chrome和mozilla有什么区别？我也在使用最新版本的“ jquery”

Answer 1

您的代码在Chrome和FF上似乎工作正常。也许您可以尝试一种不同的方法，我认为这比添加和删除类更容易。您可以使用data- *属性来实现所需的功能。

请参见以下示例：

  $('#username-signup').blur(function() {

    var tempusername = $('#username-signup').val();

    $.ajax({
      type: "POST",
      url: "https://jsonplaceholder.typicode.com/posts",
      data: {
        username: tempusername
      },
      dataType: "text",
      success: function(response) {
        console.log(response);

        if (typeof response == 'string') {
          $('#username-signup').attr('data-status', 'n');
        } else {
         $('#username-signup').attr('data-status', 'y');

        }
      },
      error: function() {

        //console.log('error');
      },
      timeout: 5000

    });
  });

input[data-status='n'] {
  border-color: red;
}

input[data-status='y'] {
  border-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" class="form-control" id="username-signup" data-status="">

Answer 2

我怀疑在AJAX调用之前或期间，有其他原因导致Chrome出现故障，并且response未填充或blur未冒泡。尝试以下代码并更新您的帖子。还要在ajax调用之前和之后查看“网络”选项卡，以查看您是否正在发送错误数据或在PHP响应中收到错误。

$(function() {
  $('#username-signup').blur(function(e) {
    console.log("Username Signup Blue Event");
    $.ajax({
      type: "POST",
      url: "includes/identification.php",
      data: {
        username: $('#username-signup').val()
      },
      dataType: "text",
      success: function(response) {
        console.log(response);
        if (response == 'n') {
          //console.log('n');
          $('#username-signup').removeClass('identication-y');
          $('#username-signup').addClass('identication-n');
        } else {
          //console.log('else');
          $('#username-signup').removeClass('identication-n');
          $('#username-signup').addClass('identication-y');
        }
      },
      error: function(x, t, err) {
        console.log('Ajax Error:', x, t, err);
      },
      timeout: 5000
    });
  });
});

.identication-n {
  border-color: #ff3547;
}

.identication-y {
  border-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" class="form-control" id="username-signup">

Answer 3

所以您可以看到代码很好，所以我使用了波纹管清除了Chrome中的浏览器数据现在一切正常，IDK实际的问题是什么，但这是解决方案。

chrome://settings/clearBrowserData

对我来说最后24小时的清算就足够了。

jQuery .addClass（）函数在chrome中不起作用，但在Mozilla中可以正常工作

3 个答案: