2016-12-02 45 views
0

我有一些使用php显示的嵌套记录,每个记录中都包含一个提交按钮。当用户点击一个特定的记录时,它能够正确地发送到数据库。但是按钮应该被切换的问题以及当您提交特定记录而不是仅切换该特定按钮时,每个记录上的所有按钮都会切换。在嵌套记录中切换一行中的特定按钮

HTML

<form method="post" action="" class="input_form"> 
    <label for="item"></label> 
    <input type="text" name="item" id="item" /> 
    <input type="submit" name="button" id="button" value="Submit" class="input1" /> 
</form> 

<form method="post" action="" class="input_form"> 
    <label for="item"></label> 
    <input type="text" name="item" id="item" /> 
    <input type="submit" name="button" id="button" value="Submit" class="input1" /> 
</form> 

<form method="post" action="" class="input_form"> 
    <label for="item"></label> 
    <input type="text" name="item" id="item" /> 
    <input type="submit" name="button" id="button" value="Submit" class="input1" /> 
</form> 

JS

$(document).ready(function() { 
 
    $(".input_form").on('submit', function(event) { 
 
    $('.input1,.input2').toggleClass('input2', 'input'); 
 
    event.preventDefault(); 
 
    if ($('.input2').hasClass('inpu2')) { 
 
     data = $(this).serialize(); 
 
     $.ajax({ 
 
     type: "POST", 
 
     url: "http://localhost/myapp/scripts/inputs.php", 
 
     data: data 
 
     }).success(function() {}); 
 
    } else { 
 
     if ($('.input').hasClass('input')) { 
 
     data = $(this).serialize(); 
 
     $.ajax({ 
 
      type: "POST", 
 
      url: "http://localhost/myapp/scripts/input_delete.php", 
 
      data: data 
 
     }).success(function() {}); 
 
     } 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

请告诉我们您的HTML代码(这是生成)。你是什​​么意思的“指针” - 只有swotch类input2和输入? – Seb

+0

'$('。input')。hasClass('input')'。严重? – Fefux

+0

我的意思是当我提交一个特定的行而不是该按钮更改类时,所有按钮类的更改 – user6579134

回答

0

代码中的错字错误的情侣..

1)$('.input1,.input2').toggleClass('input2', 'input');这将选择与类.input1.input2和拨动它所有的按钮。你想要的只是选择特定的按钮。因此,从form

$(this).find('.input,.input2').toggleClass('input2', 'input'); 
// note input1 is changed to input as I dont see input1 
// anywhere else, hence assuming to be a typo 

这里$(this)导航将指向触发submit事件form

2)另一个问题是

if ($('.input2').hasClass('inpu2')) { 

if ($('.input').hasClass('input')) { 

在这里,您试图选择具有.input2类和.input元素。 YOu只是选择一个特定的类的元素,并检查该元素是否包含那个总是为true而不是逻辑的类。你真正想要的是检查你的input元素是否有这些类

所以改成这样

if ($(this).find('input').hasClass('input2')) { 

if ($(this).find('input').hasClass('input')) { 
+0

雷迪非常感谢它的工作。 – user6579134

0

重写

$('.input1,.input2').toggleClass('input2', 'input'); 

$('input[type=submit]', this).toggleClass('input2', 'input'); 

(不知道过去的事情应该是输入1)