Question

在我的wordpress网站中，我插入输入字段并使用Ajax获取数据。

这是Jquery：

<script>
$(function() {
    $('body').on('click', '.post-link', function() {
        $('#post-cont').fadeIn();
        var post_names = '';
        var ajax = {};
        ajax.id = $(this).attr('rel');
        var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
        jQuery.post(ajaxurl, {
            'action': 'get_img_post_and_title',
            'data': ajax
        }, function(response) {

            if (response.success) {

                if (post_names === '') {
                    post_names = 'aa';
                } else if (post_names === 'aa') {
                    post_names = 'ab';
                } else if (post_names === 'ab') {
                    post_names = 'ac';
                } else {
                    post_names = 'ad';
                }
                if ($('#post-cont input').length <= 4) {
                    $('#post-cont').append('<div class="rows"><input name="' + post_names + '" value="' + response.data.post_id + '"> ' + response.data.post_title + '   <img src="' + response.data.post_thumb + '"/></input></div>');
                }
            }
        });
    });
});
</script>

PHP：

 add_action("wp_ajax_get_img_post_and_title", "get_img_post_and_title");
 add_action("wp_ajax_nopriv_get_img_post_and_title", "get_img_post_and_title");
    function get_img_post_and_title(){
     $return = array(    

    'post_id' => $_POST['data']['id'],
    'post_title' => get_the_title($_POST['data']['id']),
    'post_thumb' => wp_get_attachment_image_url(get_post_thumbnail_id($_POST['data']['id'])),           
    );      

    wp_send_json_success($return);    
   }

使用此脚本，我尝试控制max number of input field to 4，然后从aa, ab, ac, ad分配自定义名称。

此脚本成功添加了最大值4但仅为所有错误分配了aa名称。

如何为所有插入的字段分配4个不同的名称？

Answer 1

请尝试以下代码捕捉：

<script>
var custom_input_names = ['aa', 'ab', 'ac', 'ad'];

$(function() {

    $('body').on('click', '.post-link', function() {
        $('#post-cont').fadeIn();
        var post_names = '';
        var ajax = {};
        ajax.id = $(this).attr('rel');
        var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
        jQuery.post(ajaxurl, {
            'action': 'get_img_post_and_title',
            'data': ajax
        }, function(response) {

            if (response.success) {

                for (var i=0; i<custom_input_names.length; i++) {
                    if ($('#post-cont').find('input[name=' + custom_input_names[i] + ']').length < 1) {
                      $('#post-cont').append('<div class="rows"><input name="' + custom_input_names[i] + '" value="' + response.data.post_id + '"> ' + response.data.post_title + '   <img src="' + response.data.post_thumb + '"/></input></div>');
                      break;
                    }
                }
            }
        });
    });

});
</script>

如果您希望限制超过4，则可以向custom_input_names添加更多元素。例如，如果您想要最多7，那么您可以更改custom_input_names，如下所示：

var custom_input_names = ['aa', 'ab', 'ac', 'ad', 'ae', 'af', 'ag'];

Answer 2

您的代码中存在拼写错误，导致post_names状态无法更新到上次使用的输入字段名称。删除1，它应该工作！（您的变量在其中一行代码中称为post_names1！）; - ）

if (post_names === '') {
  post_names = 'aa';
} else if (post_names**l** === 'aa'){
  post_names = 'ab';
} else if (post_names === 'ab'){
  post_names = 'ac';
} else {
  post_names = 'ad';
}

修复了（也改变了最后一个将它设置为ad一点，只是为了确定）：

if (post_names === '') {
  post_names = 'aa';
} else if (post_names === 'aa'){
  post_names = 'ab';
} else if (post_names === 'ab'){
  post_names = 'ac';
} else if (post_names === 'ac'){
  post_names = 'ad';
}

除此之外，每次运行此函数时，您都会重置post_names的状态。您应该将post_names = ''移出功能。

var post_names = '';
if (response.success) {
    if (post_names === '') {
        post_names = 'aa';
    } else if (post_names === 'aa') {
        post_names = 'ab';
    } else if (post_names === 'ab') {
        post_names = 'ac';
    } else {
        post_names = 'ad';
    }
    if ($('#post-cont input').length <= 4) {
        $('#post-cont').append('<div class="rows"><input name="' + post_names + '" value="' + response.data.post_id + '"> ' + response.data.post_title + '   <img src="' + response.data.post_thumb + '"/></input></div>');
    }
}

Answer 3

什么会好......

将输入类型分配给<input>
使用每行的表单而不是一行
将ID放在名为id
不要将图像放在输入内（更好：示例fiddle）

答案很长......;）

if (response.success) {
  $form = '<div class="rows">' +
          '<form method="POST" action="data.php">' +
          '  <input type="hidden" name="id" value="' + response.data.post_id + '">' +
          '  <div class="input_container">' +
          '    <input type="submit" class="myinput" value="' + response.data.post_title + '">' +
          '    <img src="' + response.data.post_thumb + '" id="input_img">' +
          '  </div>' +
          '</form>' +
          '</div>';

  $('#post-cont').append($form);
}

css part：

.input_container {
    position:relative;
    padding:0;
    margin:0;
}
.myinput {
    height:20px;
    margin:0;
    padding-left: 30px;
}
.input_container img {
    position:absolute;
    bottom:8px;
    left:10px;
    width:10px;
    height:10px;
}

在data.php中

$ID = $_POST['id'];
echo get_post_meta( $ID, 'brand', true );

插入的输入字段JQuery的自定义名称

3 个答案: