两个相同的带有 jquery 模态屏幕的 POST 操作，一个有效，一个无效？

Question

我正在使用这个颜色框代码：

<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>

以及这两个相同的 POST 操作按钮：

<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";
}

当我单击第一个按钮时，会打开一个模式窗口并正常加载 PHP， 但是当我单击第二个按钮时，它只是直接重定向到 PHP 文件。

这是因为他们共享相同的 id 吗？

假设我想要 100 个相同的按钮，并且在每个按钮中更改输入的值（现在是“1”，它将是 2、3、4...100）。 我希望模态窗口保持相同的工作方式，并根据这些变化的值显示不同的内容。所以基本上我宁愿不为每个按钮添加额外的代码。

导致问题的原因是什么？什么是最有效的解决方案？

编辑：

现在我可以理解我必须像这样乘以代码：

<script>
    $(document).ready(function(){
        $("#cboxFormButton1").click(function(e){
        e.preventDefault();
        $.colorbox({
        href: $(this).closest('form').attr ('action'),
        data: {a: $("input#111").val()}
        });


            return false;
        });
    });

                $(document).ready(function(){
        $("#cboxFormButton2").click(function(e){
        e.preventDefault();
        $.colorbox({
        href: $(this).closest('form').attr ('action'),
        data: {a: $("input#222").val()}
        });


            return false;
        });
    });

</script>

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

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

有没有更高效/更短的代码？

Answer 1

所有 DOM 元素都应具有唯一的 ID，如 here 所述。

很遗憾，DOM 的两个元素具有相同的 IDcboxFormButton。

使 ID 独一无二。

Answer 2

对于 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>