Question

我想用jQuery减少数字。例如。当用户删除第4行时有5行。那么第5行的编号应该是No.4。目前，我的代码仅在用户删除第4行时才起作用，然后第5行仍为No.5。

这是我的截图和代码。

这是我的设计代码。

<div id="userlistOptionBox" class="row" style="background:#f5f5f5;margin:0px;padding:20px 0;margin-bottom: 8%;">
                        <div class="row user_list_show" style="margin-bottom:20px;">
                            <div class="col-sm-10">
                                <h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3>  
                                <div class="row" style="margin:0 0 0 5px;">
                                    <div class="col-sm-6">
                                        <label for="user_name">Name</label><br>
                                        <input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="mail_addr">Email</label><br>
                                        <input type="text" required oninvalid="setCustomValidity('ユーザー名を入れてください')" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2" style="margin-top:7%;">
                                <a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>
                                <a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>
                            </div>
                        </div>
                    </div>

这是我的JQuery代码。

// User Registration
        var userListShowHtml =  '<div class="row user_list_show" id="row1" style="margin-bottom:20px;">'+
                                    '<div class="col-sm-10">'+
                                        '<h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3>'+  
                                        '<div class="row" style="margin:0 0 0 5px;">'+
                                            '<div class="col-sm-6">'+
                                                '<label for="user_name">Name</label><br>'+
                                                '<input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">'+
                                            '</div>'+
                                            '<div class="col-sm-6">'+
                                                '<label for="mail_addr">Email</label><br>'+
                                                '<input type="text" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">'+
                                            '</div>'+  
                                        '</div>'+
                                    '</div>'+
                                    '<div class="col-sm-2" style="margin-top:7%;">'+
                                        '<a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>'+
                                        '<a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>'+
                                    '</div>'+
                                '</div>';


        var rowno = 1;
        var max = 20;
        var min=1;
        $("#userlistOptionBox").on('click', '.add_user_list', function(){

            $('.remove_user_list').prop('disabled', false);
            if (rowno<maximum) {
                rowno++;
            $(".user_list_show:last").after(userListShowHtml.replace(/1user/g,rowno+"user"));
            }
            else if (rowno==max) {
                $('.add_user_list').prop('disabled', true);
            }
        });

        $("#userlistOptionBox").on('click', '.remove_user_list', function(){

            rowno--

            if (rowno==minimum) {
                $('.remove_user_list').prop('disabled', true);

            }

            $(this).closest('.user_list_show').remove();

            $('.add_user_list').prop('disabled', false);

        });

Answer 1

您可以逐个遍历所有用户列表，然后您可以按照以下步骤更新其标题。请检查.remove_user_list点击处理程序，查看我为其添加的代码。

//loop through all user_list_show and update the title
     $('.user_list_show').each(function(index) {
       var userNumber = index + 1;
       $(this).find(".usertitle").text(userNumber + "user");
     });

   var userListShowHtml = '<div class="row user_list_show" id="row1" style="margin-bottom:20px;">' +
     '<div class="col-sm-10">' +
     '<h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3>' +
     '<div class="row" style="margin:0 0 0 5px;">' +
     '<div class="col-sm-6">' +
     '<label for="user_name">Name</label><br>' +
     '<input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">' +
     '</div>' +
     '<div class="col-sm-6">' +
     '<label for="mail_addr">Email</label><br>' +
     '<input type="text" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">' +
     '</div>' +
     '</div>' +
     '</div>' +
     '<div class="col-sm-2" style="margin-top:7%;">' +
     '<a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>' +
     '<a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>' +
     '</div>' +
     '</div>';


   var rowno = 1;
   var max, maximum = 20;
   var minimum = 1;
   $("#userlistOptionBox").on('click', '.add_user_list', function() {

     $('.remove_user_list').prop('disabled', false);
     if (rowno < maximum) {
       rowno++;
       $(".user_list_show:last").after(userListShowHtml.replace(/1user/g, rowno + "user"));
     } else if (rowno == max) {
       $('.add_user_list').prop('disabled', true);
     }
   });

   $("#userlistOptionBox").on('click', '.remove_user_list', function() {

     rowno--

     if (rowno == minimum) {
       $('.remove_user_list').prop('disabled', true);

     }

     $(this).closest('.user_list_show').remove();

     $('.add_user_list').prop('disabled', false);


     //loop through all user_list_show and update the title
     $('.user_list_show').each(function(index) {
       var userNumber = index + 1;
       $(this).find(".usertitle").text(userNumber + "user");
     });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="userlistOptionBox" class="row" style="background:#f5f5f5;margin:0px;padding:20px 0;margin-bottom: 8%;">
  <div class="row user_list_show" style="margin-bottom:20px;">
    <div class="col-sm-10">
      <h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3> 
      <div class="row" style="margin:0 0 0 5px;">
        <div class="col-sm-6">
          <label for="user_name">Name</label>
          <br>
          <input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">
        </div>
        <div class="col-sm-6">
          <label for="mail_addr">Email</label>
          <br>
          <input type="text" required oninvalid="setCustomValidity('ユーザー名を入れてください')" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">
        </div>
      </div>
    </div>
    <div class="col-sm-2" style="margin-top:7%;">
      <a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>
      <a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>
    </div>
  </div>
</div>

Answer 2

您需要遍历所有行并重置用户标题文本。我可能会写一个函数来做到这一点。类似的东西：

function updateUserTitles() {
     var row = 1;
     $("div").filter(".user_list_show").each(function(){
          $(".usertitle h3").html(row + "user");
          row++;
     });
}

删除1行，jQuery中的标题号自动缩小

2 个答案: