javascript - 如何在动态添加/删除输入字段中获取唯一的随机值

Question

我已经创建了动态添加/删除字段。一切都运行良好。唯一的问题是有一个隐藏字段有 name="auth_key[]" .

为此，我想要随机值。所以我使用 value="<?php echo rand(); ?>" .但是，它会为添加的所有字段创建相同的随机值。我希望所有添加的字段都有唯一的随机值。

以下是我的代码:

jQuery(document).ready(function($) {
  var wrapper = $("#member-fields");
  var add_button = $("#add-member-fields");

  var x = 1;
  var availableAttributes = <?php echo json_encode($get_user_emails); ?>;
  var previousValue = "";

  add_button.click(function(e) {
    e.preventDefault();
    x++;
    var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" id="user_email" name="user_email[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="user_status[]" value="Unverified" placeholder=""><input type="hidden" class="form-control" name="auth_key[]" value="<?php echo rand(); ?>" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_member_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

    element.fadeIn("slow").find("input[name^='user_email']").autocomplete({
      autoFocus: true,
      source: availableAttributes,
    });
    wrapper.append(element);
  });

  wrapper.on("keyup", "#user_email", function() {
    var isValid = false;
    for (i in availableAttributes) {
      if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
        isValid = true;
      }
    }
    if (!isValid) {
      this.value = previousValue
    } else {
      previousValue = this.value;
    }

  });

  wrapper.on("click", "#remove_member_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('#user-fields').remove();
      x--;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">

  <div class="panel-heading">
    <center><b>Team Members</b></center>
  </div>

  <div class="panel-body">

    <div class="row">

      <div class="col-md-5"><label>Member's Registered Email</label></div>
      <div class="col-md-5"><label>Role in Project</label></div>
      <div class="col-md-2"></div>

    </div>

    <div class="row">

      <div class="col-md-5">

        <div class="form-group">

          <input type="text" class="form-control" name="user_email[]" placeholder="">

        </div>

      </div>

      <div class="col-md-5">

        <div class="form-group">

          <input type="text" class="form-control" name="user_role[]" placeholder="">
          <input type="hidden" class="form-control" name="user_status[]" value="Verified" placeholder="">
          <input type="hidden" class="form-control" name="auth_key[]" value="<?php echo rand(); ?>" placeholder="">

        </div>

      </div>

      <div class="col-md-2">

        <button type="button" class="btn btn-success" id="add-member-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>

      </div>

    </div>

    <div id="member-fields">

    </div>

    <p class="help-block"><i>To add member please register new User, if already not registered.</i></p>

  </div>

</div>

<?php
    
    $user = wp_get_current_user();
    $args = array(
      'role'         => 'backer',
      'exclude'      => array( $user->ID ),
     );
    
    $users = get_users( $args );
    $get_user_emails = wp_list_pluck( $users, 'user_email' );
    
    ?>

请帮帮我。提前致谢。

Answer 1

您应该在 JS 部分执行此操作，在添加新字段时在点击事件中添加以下代码:

element.find('[name="auth_key[]"]').val( Math.floor(Math.random() * 10000) );

var wrapper = $("#member-fields");
var add_button = $("#add-member-fields");
var x = 1;
var availableAttributes = "";
var previousValue = "";

add_button.click(function(e) {
  e.preventDefault();
  x++;
  var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" id="user_email" name="user_email[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="user_status[]" value="Unverified" placeholder=""><input type="hidden" class="form-control" name="auth_key[]" value="<?php echo rand(); ?>" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_member_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

  element.find('[name="auth_key[]"]').val(Math.floor(Math.random() * 10000));

  console.log(element.find('[name="auth_key[]"]').val());
  wrapper.append(element);
});

wrapper.on("keyup", "#user_email", function() {
  var isValid = false;
  for (i in availableAttributes) {
    if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
      isValid = true;
    }
  }
  if (!isValid) {
    this.value = previousValue
  } else {
    previousValue = this.value;
  }

});

wrapper.on("click", "#remove_member_field", function(e) {
  e.preventDefault();
  $(this).parent().fadeOut(300, function() {
    $(this).closest('#user-fields').remove();
    x--;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">
    <center><b>Team Members</b></center>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-5"><label>Member's Registered Email</label></div>
      <div class="col-md-5"><label>Role in Project</label></div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" class="form-control" name="user_email[]" placeholder="">
        </div>
      </div>
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" class="form-control" name="user_role[]" placeholder="">
          <input type="hidden" class="form-control" name="user_status[]" value="Verified" placeholder="">
          <input type="hidden" class="form-control" name="auth_key[]" value="10" placeholder="">
        </div>
      </div>
      <div class="col-md-2">
        <button type="button" class="btn btn-success" id="add-member-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
      </div>
    </div>
    <div id="member-fields"></div>
    <p class="help-block"><i>To add member please register new User, if already not registered.</i></p>
  </div>
</div>