Question

我正在尝试动态添加输入字段，并从这些aa,ab,ac,ad分配自定义名称。

以下是代码：

<script>
$(function() {
  $('body').on('click', '.post-link', function() {
    $('#post-container').fadeIn();

    var post_title = $(this).closest('div').find('a').text();

    var val = $(this).text("val");
    if (val == "")
      var post_id = "aa";
    else if (val == "aa")
      var post_id = "ab";
    else if (val == "ab")
      var post_id = "ac";
    else
      var post_id = "ad";

    if ($('#post-container input').length <= 3)
      $('#post-container').append('<input name="' + post_id + '" value="' + post_title + '">-- <a href="#" class="remove-title">REMOVE</a></input>');
  });

  $('body').on('click', '.remove-title', function() {
    $(this).closest('input').remove();
  });

});
</script>

HTML：

<button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<div id="post-container"> </div>

现在的问题是，这会为所有四个字段添加name="ad";但我需要每个字段都有不同的名称。

如何为每个输入字段指定不同的名称？

为什么不删除标题链接？

Answer 1

请尝试以下：

$('body').on('click', '.post-link', function(){
  var names = ['aa', 'ab', 'ac', 'ad'];
  $('#post-container').fadeIn();
  var post_title = $(this).closest('div').find('a').text();

  for (var i=0; i<names.length; i++) {
    if ($('#post-container').find('input[name=' + names[i] + ']').length < 1) {
      $('#post-container').append( '<div class="row"><input name="' + names[i] + '" value="'+post_title+'">-- <a href="#" class="remove-title">REMOVE</a></input></div>' );   
      break;
    }
  }
});

$('body').on('click', '.remove-title', function() {
  $(this).closest('.row').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<div id="post-container"> </div>

Answer 2

正如米罗所说，你试图以错误的方式从元素中获取价值。

获取它，获取使用PHP打印的rel值，然后将其指定为与post_id和rel连接的输入的名称值。

<script>
$(function() {
  $('body').on('click', '.post-link', function() {

    $('#post-container').fadeIn();

    var post_title = $(this).closest('div').find('a').text();

    // Get the value of the clicked element
    let val = $(this).val(),
    // Get the rel atribute value from the clicked element
        rel = $(this).attr('rel'),
    // Create the post_id variable to assign the value
       post_id = '';

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

    if ($('#post-container input').length <= 3) {
      // Put it before the post_id assignation you did adding a "-" 
      // in order to separate post_id and rel values
      $('#post-container').append('<input name="' + post_id + '-' + rel + '" value="' + post_title + '">-- <a href="#" class="remove-title">REMOVE</a></input>');
    }

  });

  $('body').on('click', '.remove-title', function() {
    $(this).closest('input').remove();
  });

});
</script>

使用自定义名称动态添加输入字段

2 个答案: