Question

我从Jquery开始，我遇到了这个问题。我想点击发送按钮，输入的边框为红色。

HTML CODE

<input type="text" placeholder="Put your name" id="name"/>
<input type="submit" value="send" id="send"/>

Javascript代码

var name = document.getElementById('name');
$("#send").click(onClick);

           function onClick() {
               $("#name").addClass("error");
           }

CSS STYLE

.error{
    border-color:red;
}

如果我把.addClass放在函数之外，点击工作，我不知道问题出在哪里？

Answer 1

$("#send").click(onClick);查找id=send的项目;您的按钮有value send，这是不同的。将id="send"添加到您的<input type="submit" value="send" onclick="send"/>

完整的HTML代码应如下所示：

<input type="text" placeholder="Put your name" id="name"/>
<input type="submit" value="send" id="send"/>

Answer 2

尝试使用：

<input type="submit" value="send" id="send"/>

您使用onclick属性来调用不存在的send功能。而你在那里查询一个不存在的#send id。当你为JS编写代码时，我认为你错过了修改。

Answer 3

<input type="submit" value="send" id="send"/>

JS：

$(document).ready(function() {
    $('#send').click(function(e) {
       e.preventDefault();
       $('#name').addClass('error');
    });
});

当您点击提交按钮时，您会发送表单，这就是您应该使用e.preventDefault()的原因。

您还应该将您的jquery代码放在document.ready函数

中

Answer 4

我实际上没有得到你的需要，但据我所知，使用这种方法

<强>的jQuery

$(function(){
  $("#myform").on('submit',function(){onClick();return false;});
});

function onClick() {
   $("#name").addClass("error");   
}

<强> HTML

<form id="myform">
    <input type="text" placeholder="Put your name" id="name"/>
    <input type="submit" value="send" id="send"/>
</form>

你需要使用表单标签来使提交按钮工作并控制它的工作，你还需要在“提交”事件上使用函数，这样代码才能感知它应该控制表单的工作。

Answer 5

以下代码应该执行您要实现的目标。这是一个有效的js fiddle.

$("#send").on('click', function(e){
    $("#name").addClass("error");

    e.preventDefault(); 
});

提示：为什么在使用jQuery时使用本机javascript函数。

而不是：

var name = document.getElementById('name');

你可以这样做：

var name = $('#name');

希望有所帮助。

Jquery addClass不起作用

5 个答案: