显示具有动态值的隐藏按钮 jquery

Question

我在 index.php 中有这段代码：

 <tbody>
        <?php foreach($data as $fetch): ?>
            <tr>
    <input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id']?>">
                <td class="segment" contenteditable="true"><?= $fetch['segment'] ?></td>
                <td class="text-center">
                    <button class = "btn btn-default action-btn" data-id="<?= $fetch['id'] ?>" data-action="update"> 
                        <span class = "glyphicon glyphicon-edit"></span> Update
                    </button> 
                    | 

                    <button class = "btn btn-success activate-btn action-btn" data-id="<?= $fetch['id'] ?>" type="submit" data-action="activate">
                        <span class = "glyphicon glyphicon-check"></span> Activate
                    </button> 

                    <button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="<?= $fetch['id'] ?>"  data-action="deactivate">
                        <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                    </button>
                </td>
            </tr>
        <?php endforeach; ?>

    </tbody>
</table>
     <form action="create.php" method="post" class="form-inline">
                <div class = "form-group">
                <label>Segment:</label>
                <input type  = "text" name = "segment" class = "form-control" required = "required"/>
            </div>
                <div class = "form-group">
                    <button type="submit" name = "save" class = "btn btn-primary"><span class = "glyphicon glyphicon-plus"></span> Add</button>
            </div>
            </form>
    <script type="text/javascript">
        $(".action-btn").on("click", function(e) {
            var id      = $(this).attr("data-id");
            var segment = $(this).parents("tr").find("td.segment").html();
            var action  = $(this).attr("data-action");
            $.ajax({
                "url": "action.php",
                "method": "post",
                "data": {
                    "id":      id,
                    "segment": segment,
                    "action":  action
                },
                success: function(data) {
                    alert(data);
                }
            });
        });  </script>
    <script>$(".activate-btn").click(function(){$(this).hide();$(".deactivate-btn").show();});</script>
</body>

问题是当我点击任何激活按钮时，所有停用按钮都会显示并且激活不会消失，

我的意思是，当我在任何其他 td 中单击激活停用时，当我再次单击停用时，激活按钮不显示，有什么帮助吗？

Answer 1

你可能想改变

$(".activate-btn").click(function(){$(this).hide();$(".deactivate-btn").show();});

进入：

$(".action-btn").click(function(){$(this).hide();$(".deactivate-btn").show();});
$(".deactivate-btn").click(function(){$(this).show();$(".action-btn").show();});

Answer 2

拥有 2 个按钮会让最终用户感到困惑，因为他们不知道哪个段是活动的，哪个段是停用的。从您的代码中，页面最初加载时会显示所有按钮。另一种选择是：

if($fetch['status']=="active"){
<button class="btn-danger statusbtn" data-action="deactivate"
    id="<?=$fetch['id']?>">
    <span class="glyphicon glyphicon-folder-close"></span>
    Deactivate
</button>
}else{
<button class="btn-success statusbtn" data-action="activate"
    id="<?=$fetch['id']?>">
    <span class="glyphicon glyphicon-ok"></span>
    Activate
</button>
}

然后编辑您的 javascript 以读取：

  <script type="text/javascript">
            $(".action-btn").on("click", function(e) {
                var id      = $(this).attr("id");
                var segment =       $(this).parents("tr").find("td.segment").html();
                var action  = $(this).attr("data-action");
                $.ajax({
                    "url": "action.php",
                    "method": "post",
                    "data": {
                        "id":      id,
                        "segment": segment,
                        "action":  action
                    },
                    success: function(data) {
                      if(action=='activate'){
                        $(this).html("    
                          <span class='glyphicon glyphicon-folder-close'>      
                          </span>
    Deactivate");
    $(this).attr('data-action',"deactivate");
    $(this).removeClass('btn-success')
    $(this).addClass('btn-danger');
                      }else{
                       $(this).html("    
                          <span class='glyphicon glyphicon-ok'>      
                          </span>
    activate");
    $(this).attr('data-action',"activate");
    $(this).removeClass('btn-danger')
    $(this).addClass('btn-success');
                      }
                        alert(data);
                    }
                });
            });  
    </script>

我还没有运行代码来测试它的错误，但我认为这会解决你的问题。