Question

<form id = "form_options" method="get" action= "../menu-option" class= "flex">
                <span class="deliveryItem pointer vertical-top textCenter view_it
                <?php if($filter[0] == 'Y'){echo "vegan ";}
                if($filter[1] == 'Y'){echo "vegetarian ";}
                if($filter[2] == 'Y'){echo "pescetarian ";}
                if($filter[3] == 'Y'){echo "dairy-free ";}
                if($filter[4] == 'Y'){echo "egg-free ";}
                if($filter[5] == 'Y'){echo "fish-free ";}
                if($filter[6] == 'Y'){echo "shellfish ";}
                if($filter[7] == 'Y'){echo "tree ";}
                if($filter[8] == 'Y'){echo "peanut ";}
                if($filter[9] == 'Y'){echo "soy ";}
                if($filter[10] == 'Y'){echo "total-fat ";}
                if($filter[11] == 'Y'){echo "saturated-fat ";}
                if($filter[12] == 'Y'){echo "cholesterol ";}
                if($filter[13] == 'Y'){echo "sodium ";}
                if($filter[14] == 'Y'){echo "protein ";}
                if($filter[15] == 'Y'){echo "calories ";}
                ?>">
                <?php echo '<input type="hidden" name="meal_id" value="'.$meal_id1.'">';?>
                 <img src="<?php echo $image1; ?>" width="280px" height= "200px;" class="foodImage">
                <div class="menuDelivery">
                <h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
                <p class= "OldStandardItalic text-black font2 vertical1"> <?php echo $subtitle1;?> </p>
                <hr>
                <span class="open_sanssemibold text-black">
                <?php   if(count($prices1) > 1){print_r($firstEle ." - ". $lastEle);}
                else{ print_r($price1);}
                ?>
                <br>
                </span>
                <span class="text-black font2">
                <?php   
                $counter = 0;
                if(mysqli_num_rows($result_meal_option) > 1)
                while ($row_meal_option = mysqli_fetch_assoc($result_meal_option)) {
                    $counter ++;
                            $q_filters = "select * from main_filters where meal_options_id = '{$row_meal_option['id']}'";
                            $result_filters = mysqli_query($conn,$q_filters);
                             $row_filterd= mysqli_fetch_assoc($result_filters);



                             ?>

                             <span class="deliveryItem1 
                             <?php 
                             if($row_filterd["vegan"] == 'Y'){echo "vegan ";}
                             if($row_filterd["vegetarian"] == 'Y'){echo "vegetarian ";}
                             if($row_filterd["pescatarian"] == 'Y'){echo "pescetarian ";}
                             if($row_filterd["dairy-free"] == 'Y'){echo "dairy-free ";}
                             if($row_filterd["egg-free"] == 'Y'){echo "egg-free ";}
                             if($row_filterd["fish-free"] == 'Y'){echo "fish-free ";}
                             if($row_filterd["shellfish-free"] == 'Y'){echo "shellfish ";}
                             if($row_filterd["tree nut-free"] == 'Y'){echo "tree ";}
                             if($row_filterd["peanut-free"] == 'Y'){echo "peanut ";}
                             if($row_filterd["soybean-free"] == 'Y'){echo "soy ";}
                             if($row_filterd["low-total-fat"] == 'Y'){echo "total-fat ";}
                             if($row_filterd["low-saturated-fat"] == 'Y'){echo "saturated-fat ";}
                             if($row_filterd["low-cholesterol"] == 'Y'){echo "cholesterol ";}
                             if($row_filterd["low-sodium"] == 'Y'){echo "sodium ";}
                             if($row_filterd["protein(25g)"] == 'Y'){echo "protein ";}
                             if($row_filterd["calories(450)"] == 'Y'){echo "calories ";}

                             ?>

                             ">
                             <?php 
                             //print_r($row_filterd);die;
                             echo($counter>1 ? "| ":""). $row_meal_option['label']. "</span>";
                        }  ?>

                <br>
                </span>
                <button type="submit" class="view white cbtn1 open_sansbold check_menu">View/Add</button>
                </div>
                </span>
                </form>

我有这个代码，我的结果是这样的：

但我想要的不止一种形式是照片和跨度内的所有其他内容都可以点击而不仅仅是“查看/添加”按钮，但是现在当我这样做时它只提交显示的第一个表单，甚至如果我点击其他的，那么发送的唯一的meal_id就是第一个。我认为它与我的表单ID有关，但是当我将它更改为类时，一切都会发生冲突，我该如何解决这个问题呢？我只是这个javascript代码，使跨度可点击的所有内容：

$('.view_it').on('click', function(e){
    e.preventDefault();
    $('#form_options').submit();
});

Answer 1

id属性是唯一 id 在网页上添加DOM元素。不要重复。

<button type="button" ...

$('.view_it').on('click', function(e){
    $(this).closest('form').submit();
});

Answer 2

由于var element1 = $("some-element"); element1.addClass("hidden");范围是表单标记的直接子代，因此您可以通过.view_it获取表单的参考。

span.parentNode

您应该从表单中删除重复的id属性（现在不需要）

Answer 3

您可以使用最接近的方法获取表单，而无需引用表单ID。 closest()向前移动DOM树并返回与传递的表达式匹配的第一个（单个）祖先。

$('.view_it').on('click', function(e){
    e.preventDefault();
    var form = $(this).closest("form");
    form.submit();
});

在您单击跨度的任何位置提交的表单，但由于表单ID重复而无法正常运行

3 个答案: