Question

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

我有一个带有3个按钮的表单，名为next，previous和最后提交这些按钮具有相同的类名btn，当我将该函数放在下一个按钮上，类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>

Answer 1

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

Answer 2

您需要在类中添加引号，例如$('.btn').click(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');
});

小提琴 here

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

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

这个的最好方法是通过向按钮添加新的类或ID。

Answer 3

你可以试试2路

编写onclick函数并将函数内联调用为

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

或者其他

为按钮设置另一个类名

<button class="btn clickme" >submit</button></form> 
<script>
 $('.clickme').click(function() {
     alert('adad');
 );
</script>

修改

我不知道这是正确的做法。试试这个

将值设置为按钮

<button class="btn" value="prev">prev</button> <button class="btn" value="next">next</button> <button class="btn" value="submit">submit</button>

在javascript中

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

Answer 4

将您的脚本修改为以下内容：

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

Example

注意两件事：

您的jQuery选择器中没有括号
只要您的“下一步”按钮始终是btn

form

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

Answer 5

如果你正在处理动态添加的按钮，你可以去。

$(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')
}
})                       
})

希望这有助于某人。

请参阅小提琴：http://jsfiddle.net/74UUr/

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

5 个答案: