下一个按钮上的Javascript表单验证所有按钮都有相同的类？

我是JavaScript新手，需要一些表单验证方面的帮助

我有一个表单，有3个按钮，分别命名为next、previous和end submit。这些按钮的类名都是btn，当我将函数放在next按钮上时，类btn被应用到了所有按钮上，我无法更改类或添加任何ID，因为这是在JavaScript中

任何人都可以告诉如何处理btn类，但只适用于下一步按钮

我的代码是

<form class="ms-form">
    <input type="text">
    <button class="btn">prev</button>
    <button class="btn">next</button>
    <button class="btn">submit</button>
</form>
<script>
    $(.btn).click(function() {
        alert('ok');
    });
</script>

上
下一个
提交
$（.btn）。单击（函数（）{
警报（“正常”）；
});

您需要在类周围添加引号，如

$（'.btn'）。单击（function（）{

要仅应用于“下一步”按钮（并且不添加新类或添加ID），可以执行以下操作：

$('.btn').eq(0).click(function() {
    alert('this is the PREV');
});
$('.btn').eq(1).click(function() {
    alert('this is the NEXT');
});
$('.btn').eq(2).click(function() {
    alert('this is the SUBMIT');
});

小提琴

或者，您可以使用以下内容：

var next;
$('.btn').each(function () {
    if ($(this).text() == 'next') {
        next = this;
    }
});
$(next).click(function () {
    alert('ok');
});

---

实现这一点的最佳方法是向按钮添加新的类或id。

使用jQuery选择器

    $('.btn:eq(0)').click(function() {
       // click handler for prev
    });

    $('.btn:eq(1)').click(function() {
       // click handler for next
    });

    $('.btn:eq(2)').click(function() {
       // click handler for submit
    });

你可以试两种方法

编写onclick函数并将函数本身作为

<button class="btn" onclick="alertme();">submit</button></form> 
<script>
function alertme() {
   alert('ok');
}
</script>

---

将脚本修改为以下内容：

$('.btn:nth-child(2)').click(function(){
    alert('ok');
});

注意两件事：

jQuery选择器中没有括号

只要您的“下一步”按钮始终是

表单的第二个
btn
子项，此功能就可以使用

---

为了获得更正确的解决方案，我建议在“下一步”按钮中添加一个唯一的类（或ID），并使用它应用事件侦听器。

如果您处理的是动态添加的按钮，您可以选择

$(function(){

$("body").on('click', '.btn',function(){ // Handle click by propagation

var v = $(this).val();//get the Value

if(-1!=v.indexOf('ev')){

console.log('prev') // or alert('prev')
}


if(-1!=v.indexOf('xt')){

console.log('Next') // or alert('Next')
}


if(-1!=v.indexOf('mit')){

console.log('Sumbmit') // or alert('Submit')
}
})                       
})

希望这对别人有帮助

---

参见fiddle:

你能展示你所尝试的吗？你能检查并展示按钮html代码吗？@Alex，在你的问题上发布此代码，以及按钮代码。我们可以在你发布后帮助格式化。请修改问题并展示三个按钮的html代码。

$（'.btn'）。eq（0）。单击（）

将应用于找到的第一个btn…不经典但有效。我真的建议您在HTML中添加第二个类，或Id或名称…也可以通过.btn循环并在其内部HTML上测试，但这不是一个好主意。先生，我只想提醒下一个问题。如果我添加clickme，它是动态类。它添加在所有中可以将动态值设置为e按钮？下一个

$('.btn').click(function() {
  if($(this).attr("value") == 'next') {
     alert("next code here");
  }
}); 

$('.btn:nth-child(2)').click(function(){
    alert('ok');
});

$(function(){

$("body").on('click', '.btn',function(){ // Handle click by propagation

var v = $(this).val();//get the Value

if(-1!=v.indexOf('ev')){

console.log('prev') // or alert('prev')
}


if(-1!=v.indexOf('xt')){

console.log('Next') // or alert('Next')
}


if(-1!=v.indexOf('mit')){

console.log('Sumbmit') // or alert('Submit')
}
})                       
})