Question

我想在点击按钮中的onclick时隐藏<a href= ...>。这可以在我已经拥有的javascript中完成，还是需要创建一个新函数？

<script type="text/javascript">
    function actions($id, $action){

        $.ajax({
            url: "inc/actions.inc.php",
            data: {id : $id, action: $action},
            type: "POST",
        });
    }
</script>


<a href="#" id="125" class="list-group-item">
<div class="col-md-12 text-center">
<button type="button" onclick="actions(125,'found')" class="btn btn-success btn-lg btn-block"> Found </button>
</div>
</a>

Answer 1

绝对可以在现有代码中完成。

您需要做的就是在调用"none"方法后将目标元素的 style.display 更改为$.ajax：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  function actions($id, $action) {
    $.ajax({
      url: "inc/actions.inc.php",
      data: {
        id: $id,
        action: $action
      },
      type: "POST",
    });
    
    document.getElementById('125').style.display = "none";
  }
</script>


<a href="#" id="125" class="list-group-item">
  <div class="col-md-12 text-center">
    <button type="button" onclick="actions(125,'found')" class="btn btn-success btn-lg btn-block"> Found </button>
  </div>
</a>

这甚至可以扩展为使用通过函数传递的ID：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  function actions($id, $action) {
    $.ajax({
      url: "inc/actions.inc.php",
      data: {
        id: $id,
        action: $action
      },
      type: "POST",
    });
    
    document.getElementById($id).style.display = "none";
  }
</script>


<a href="#" id="125" class="list-group-item">
  <div class="col-md-12 text-center">
    <button type="button" onclick="actions(125,'found')" class="btn btn-success btn-lg btn-block"> Found </button>
  </div>
</a>

希望这有帮助！：）

Answer 2

使用发送ID：

在hide()标记上调用a

function actions($id, $action){

    $('#'+$id+').hide();

}

Answer 3

如果您正在寻找另一种使用javascript事件绑定的方法。此方法允许您使用this上下文，这可以提高可读性并促进事件与html的松散耦合。

$("a.list-group-item button").click(actions)

function actions() {
  $(this).parents('a').hide();

  $.ajax({
    url: "inc/actions.inc.php",
    data: {
      id: this.id,
      action: this.value
    },
    type: "POST",
    error: ()=>{
     console.log("an error has occured"");
     $(this).parents('a').show();
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="list-group-item">
  <div class="col-md-12 text-center">
    <button id="125" type="button" onclick="actions()" class="btn btn-success btn-lg btn-block" value="found">Found</button>
  </div>
</a>

单击按钮后如何隐藏锚元素？

3 个答案: