3

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

我有一个带有 3 个按钮的表单，命名为下一个，上一个，最后提交这些按钮具有相同的类名 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>
4

5 回答 5

2

使用 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
    });
于 2013-09-07T09:04:11.803 回答
1

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

在这里提琴

或者你可以使用类似的东西：

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

不过，最好的方法是向按钮添加一个新的类或 id。

于 2013-09-07T09:03:48.043 回答
0

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

$(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/

于 2013-09-07T11:09:08.903 回答
0

你可以试试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");
  }
});
于 2013-09-07T09:07:04.393 回答
0

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

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

例子

注意2点：

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

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

于 2013-09-07T09:07:41.543 回答