Question

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

<table   class = "table table-bordered table-responsive ">
    <thead>
        <tr>
            <th>Segment</th>
            <th>Action</th>
        </tr>
    </thead>
    <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'] ?>" 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'] ?>" id="<?= $fetch['id'] ?>" data-action="deactivate">
                    <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                </button>
                </td>
            </tr>
        <?php endforeach; ?>

    </tbody>
</table>

我想要的只是：

如果激活段以显示取消激活按钮，并且已经取消激活则显示激活按钮

这是ajax电话：

<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>
  $(document).on("click",".activate-btn", function() {  
    var id = $(this).attr("data-id");
    var segment = $(this).parents("tr").find("td.segment").html();
    var action = $(this).attr("data-action");
    $(this).hide();  $("#"+id).show();  $("#"+id,".deactivate-btn").show();
    console.log();
  });
  $(document).on("click",".deactivate-btn", function() {
    $(this).show();
    $("#"+id).show();
    $("#"+id,".activate-btn").show();
  });
</script>

现在所有页面都显示激活按钮，即使它已激活已经加上如果它在点击后永远不会改变为停用请帮助谢谢你

Answer 1

// check if button is disabled
if($(this).attr("disabled") == "disabled"){
    $(this).removeAttr("disabled")
}
else{
    $(this).attr("disabled","disabled")
}

Answer 2

似乎

<button ... id="<?= $fetch['id'] ?>"...Activate</button>

<button ... id="<?= $fetch['id'] ?>" ... deactivate</button>

是问题所在。 id值必须是唯一的，在这种情况下它不是唯一的。 HTML不会抱怨它，javascript显然也没有抱怨它，它只会失败。

在类似情况下我通常做的只是为id值加前缀。像这样的东西，例如

<button ... id="activate<?= $fetch['id'] ?>"...Activate</button>

<button ... id="deactivate<?= $fetch['id'] ?>" ... deactivate</button>

作为旁注，短标签的使用通常为discoraged。

Answer 3

id 必须是唯一的。您在激活和停用按钮中重复 id =“”。

Answer 4

你有太多相同的id，这导致了问题。你也可以删除类名show函数，因为这会导致所有按钮显示，如果你想要一个切换功能，这是不可取的。

下面我已经包含了显示相同的代码部分，包含2行和不同的ID。

alphanumeric = alpha & Format(numeric,"0000") '<~or into any number of zeros you prefer

$(document).on("click",".activate-btn", function() {  
    var id = $(this).attr("data-id");
    $(this).hide();
    $("#"+id+"-deactivate").show();
    
  });
  $(document).on("click",".deactivate-btn", function() {
    $(this).show();
    $("#"+id+"-activate",".activate-btn").show();
  });

单击ajax表单后更改按钮

4 个答案: