Javascript 两个与jquery模式屏幕相同的POST操作，一个工作，一个不工作'；T

我正在使用以下颜色框代码：

<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        $("#cboxFormButton").click(function(e){
        e.preventDefault();
        $.colorbox({
        href: $(this).closest('form').attr ('action'),
        data: {a: $("input#111").val()}
        });

            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#cboxFormButton”）。单击（函数（e）{
e、 预防默认值（）；
$彩色盒({
href:$（this）.closest（'form'）.attr（'action'），
数据：{a:$（“输入#111”）.val（）}
});
返回false；
});
});

除了这两个相同的后期操作按钮外：

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input id="111" name="a" type="hidden" value="1"/>
    <input type="submit" id="cboxFormButton" class="button" value="Test">
</form>
  </div>

  <div>
<form action="rrr1.php" method="POST" target="_blank" class="">
    <input id="111" name="a" type="hidden" value="1"/>
    <input type="submit" id="cboxFormButton" class="button" value="Test">
</form>

这是加载以下内容的目标rrr1.PHP文件：

<?php 

if(isset($_POST['a']));

switch ($_POST['a']) {

    case "1":
        $param1 = "1";
        break;

    case "2":
        $param1 = "2";
        break;

    default:
        $param1 = "other";
}

如前所述，所有DOM元素都应该具有唯一的ID

不幸的是，DOM的两个元素具有相同的ID
cboxFormButton

使ID唯一。
对于HTML元素，ID必须是唯一的。使用元素名称和相对位置来获取数据。然后您可以完全删除冲突的ID

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input name="a" type="hidden" value="1"/>
    <input type="submit" class="button cboxFormButton" value="Test">
</form>

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input  name="a" type="hidden" value="2"/>
    <input type="submit" class="button cboxFormButton" value="Test">
</form>

<script type="text/javascript">
$(document).ready(function(){
    $(".cboxFormButton").click(function(e){
        e.preventDefault();
        var $form = $(this).closest('form');
        $.colorbox({
            href: $form.attr('action'),
            data: {a: $form.find('input[name="a"]').val()}
        });

        return false;
    });
});
</script>


$（文档）.ready（函数（）{
$（“.cboxFormButton”）。单击（函数（e）{
e、 预防默认值（）；
var$form=$（this）.closest（'form'）；
$彩色盒({
href:$form.attr（'action'），
数据：{a:$form.find（'input[name=“a”]”）val（）}
});
返回false；
});
});
可能的重复我不确定我是否理解如何实现这一点，如果我简单地替换此代码，我仍然会遇到同样的问题，即使我更改了第二个表单的ID。我还应该更改什么？@rockyraw-删除ID时是否也更新了第二个输入的值？在您最初的示例中，这些值是相同的，因此会导致相同的服务器端执行。是的，我注意到有问题，所以我想我也应该更新它们。不过，这对我来说没有多大意义，为什么如果函数一次只能引用一个提交ID，那么唯一的提交ID是不够的？@rockyraw-我添加了一些更新的标记，并移动了单击处理程序以使用应用于提交按钮的类而不是ID（我之前错过了）。太好了！谢谢，它起作用了。我想知道，在这种情况下，为什么要使用ID而不是类？
<form action="rrr1.php" method="POST" target="_blank" class="">
    <input name="a" type="hidden" value="1"/>
    <input type="submit" class="button cboxFormButton" value="Test">
</form>

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input  name="a" type="hidden" value="2"/>
    <input type="submit" class="button cboxFormButton" value="Test">
</form>

<script type="text/javascript">
$(document).ready(function(){
    $(".cboxFormButton").click(function(e){
        e.preventDefault();
        var $form = $(this).closest('form');
        $.colorbox({
            href: $form.attr('action'),
            data: {a: $form.find('input[name="a"]').val()}
        });

        return false;
    });
});
</script>