Question

我在Wordpress中运行查询，该查询应返回客户最近的三个订单。当用户点击“更改”按钮时，它应该打开一个带有“保存”和“取消”按钮的订单。

我的jQuery只处理查询的第一个结果。当我单击第二个和第三个条目上的“更改”按钮时，没有任何反应。

我试过在jQuery上做一个循环，但它仍然只适用于第一个结果，所以我想我需要将一个变量唯一ID附加到"order_form"或请求jQuery运行三次。

关于我应该尝试什么的建议？

function hgf_myhome_dash() {

foreach( array_combine( $menuid, $custom_field_data ) as $menuid => $custom_field_data ) {

    $user_menu = json_decode( stripcslashes( $custom_field_data ) );

// The button
    echo '<div id="change_button" style="float: left;">' .  do_shortcode('[button]Change this menu[/button]') . '</div>';


// The loop
    foreach( $user_menu as $single ){   
        if( $single->id ) { 
            echo get_post( $single->id )->post_title;
        }}

// The form
        echo '
            <div id="form_show" class="modal">
            <form id="order_form"  action="" method="POST">
            <div class="modal-content">

            <div class="col_title"><h3>'.__('Current Menu' ,'rm_domain').'</h3> 
            <input type="button" id="cancel_button" class="cancel_menu" value="Cancel" />
            <input type="submit" class="save_menu" style="" name="msubmit" id="msubmit" value="Save" />
            </div>

            I am text, hear me roar.

            </div>
            </form>
            </div>
            ';



    } 

}

这是我的jQuery：

jQuery(document).ready(function($){

$("#order_form").hide();

    $( function() {
        $( "#change_button" ).on( "click", function() {
                    $("#form_show").css('display', 'block');
             $("#order_form").show();
        });

        $( "#cancel_button" ).on( "click", function() {
                $("#form_show").css('display', 'none');
             $("#order_form").hide();
        });

      } );

});

Answer 1

id属性必须是唯一的。您不能拥有多个具有相同ID的标记。当您有多个具有相同ID的元素时，浏览器将忽略除第一个ID之外的所有ID。

因此，只会计算id="change_button"，id="form_show"，id="order_form"，id="cancel_button"的首次出现次数。其他标签的行为就像没有ID一样。

您可以使用class元素代替ID，这不需要是唯一的，如下所示：

echo '<div class="change_button" style="float: left;">' .  do_shortcode('[button]Change this menu[/button]') . '</div>';

然后，您需要更改选择器：#change_button搜索包含id="change_button"的元素，.change_button搜索包含class="change_button"的元素（您可以有多个类）以空格分隔，例如class="some_class change_button some_other_class"和.change_button仍然有效。

然而，有一个问题：选择器将找到此类的所有元素。因此，$(".form_show").css('display', 'block');会将{strong>所有表单显示为class="form_show"，点击任意按钮都会显示所有表单。这不是你需要的。

因此，您的代码需要知道单击了哪个表单，并选择正确的表单。

您可以访问this处理程序中使用click点击的按钮。请注意，this将是DOM element and not a jQuery object。要将其转换为jQuery对象，您需要使用$(this)。

您可以在$(this)上使用jQuery函数来获取按钮周围的元素。例如，.next()函数将返回包含下一个元素的jQuery对象。因此，您可以使用$(this).next().show()来显示.change_button之后的元素（即表单）。

但是，我会建议使用.next。它使JavaScript过于依赖布局。设计人员可能需要在按钮和表单之间添加一些其他标签，然后您需要更改代码。

相反，您可以在.change_button中添加一些数据，以便识别需要打开的表单。例如，您可以为所有表单指定数字，并将该数字添加到.change_button。

要向任何元素添加自定义数据，您可以使用data-something="any data"。这是用于添加任意数据的HTML5标记。它非常方便，因为可以使用jQuery中的$(this).data('something')来访问它。

因此，您可以为按钮添加唯一索引，并将该索引添加到表单中。您可以添加如下唯一索引：

function hgf_myhome_dash() {

$index = 1;

foreach( array_combine( $menuid, $custom_field_data ) as $menuid => $custom_field_data ) {

    $user_menu = json_decode( stripcslashes( $custom_field_data ) );

    // The button
    echo '<div class="change_button" data-index="' . $index . '" style="float: left;">' .  do_shortcode('[button]Change this menu[/button]') . '</div>';


    // The loop
    foreach( $user_menu as $single ){
        if( $single->id ) { 
            echo get_post( $single->id )->post_title;
        }
    }

    // The form
        echo '
            <div id="form_show_' . $index . '" class="modal">
            <form id="order_form_' . $index . '"  action="" method="POST">
            <div class="modal-content">

            <div class="col_title"><h3>'.__('Current Menu' ,'rm_domain').'</h3> 
            <input type="button" class="cancel_menu cancel_button" value="Cancel" />
            <input type="submit" class="save_menu" style="" name="msubmit" id="msubmit_' . $index . '" value="Save" />
            </div>

            I am text, hear me roar.

            </div>
            </form>
            </div>
            ';



    } 

    ++$index;
}

请注意，我已将class用于change_button和cancel_button（因为这些类可能有多个按钮），但我保留了id { {1}}，form_show_{INDEX}。这是因为，当我们添加索引时，ID会变得唯一（文档中只有一个order_form_{INDEX}，只有一个form_show_1等等），所以我们使用form_show_2而不是id。

N.B。 ID必须是唯一的，因此每页只能调用一次函数class。如果您多次调用它，您的JavaScript只能在第一个实例中正常工作。如果你想多次调用这个函数，你可以使用一些全局变量而不是hgf_myhome_dash - 但是你可能需要将它重命名为更长的东西，以避免名称冲突。

然后，您可以像这样更改JS代码：

$index

P.S。顺便说一下，jQuery(document).ready(function($){ $("#order_form").hide(); $( function() { $( ".change_button" ).on( "click", function() { var index = $(this).data('index'); $("#form_show_" + index).css('display', 'block'); $("#order_form_" + index).show(); }); $( "#cancel_button" ).on( "click", function() { var index = $(this).data('index'); $("#form_show_" + index).css('display', 'none'); $("#order_form_" + index).hide(); }); } ); });和$menuid未在函数内定义。由于这不是您的问题，我假设您已删除了部分代码。如果没有，您可能需要将它们设为全局，或者通过函数参数传递它们。

如何为每个wp_query结果重复jQuery请求

1 个答案: