Php 如何为每个wp_查询结果重复jQuery请求

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

我的jQuery只处理查询的第一个结果。当我点击第二个和第三个条目上的“更改”按钮时，什么都没有发生

我已经尝试在jQuery上执行循环，但它仍然只适用于第一个结果，因此我认为需要将变量唯一ID附加到

“order\u 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>
            ';



    } 

}

---

id

属性必须是唯一的。不能有多个ID相同的标记。如果有多个ID相同的元素，浏览器将忽略除第一个ID以外的所有ID

因此，只有第一次出现的

id=“change\u button”

，

id=“form\u show”

，

id=“order\u form”

，

id=“cancel\u button”

将被计算在内。其他标记的行为就像它们没有ID一样

您可以使用

class

元素代替ID，该元素不需要唯一，如下所示：

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

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

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();
        });

      } );

}); 

注意，我使用了

class

用于

change\u按钮

和

cancel\u按钮

（因为这些类可能有几个按钮），但我保留了

id

用于

表单显示{INDEX}

，

订单{INDEX}

。这是因为，当我们添加索引时，id变得唯一（文档中只有一个

form\u show\u 1

，只有一个

form\u show\u 2

，依此类推），所以我们使用

id

，而不是

class

注意：ID必须是唯一的，因此每页只能调用一次函数

hgf\u myhome\u dash

。如果您多次调用它，您的JavaScript将只在第一个实例中正常工作。如果要多次调用该函数，可以使用一些全局变量，而不是

$index

——但可能需要将其重命名为更长的名称，以避免名称冲突

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

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

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

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

和

$custom\u field\u data

未在函数中定义。既然这不是你的问题，我想你已经删除了部分代码。如果没有，您可能需要将它们设置为全局的，或者通过函数参数传递它们。

这非常有用。我怀疑需要唯一的id，但在向表单添加id时遇到了问题（我尝试$post->id）。。。我不太了解jQuery。非常感谢你@aleks1217不能使用$post->id，因为函数中未声明$post，所以$post->id没有任何值。（您可以使用全局$post，但它在函数中没有更改，因此它将始终保持不变，它不是唯一的。）$menuid可能会工作，如果$menuid包含一个数字或一个没有特殊字符的字符串。