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

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 的隐藏字段中
• 不要将图像放置在输入内(更好的：示例小提琴(

漫长的答案... ;)

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部分：

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

在数据中.php

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