Question

向id标记添加a属性时，与其关联的事件会自动运行。如何阻止这种情况发生。

当点击我添加了一个ID a时，.show-all类有#hide-all个标签。现在我希望如果我点击该ID，数据应隐藏但是问题是它是在点击.show-all时运行的。

以下是代码：

$(".show-all").click(function(e) {
  $(".data").show();
  $(this).text("Hide-All");
  $(this).removeClass("show-all");
  $(this).attr('id', "hide-all");
});
$(document).on('click', "#hide-all", function(e) {
  $(".data").hide();
  $(this).text("Show-All");
  $(this).removeAttr("id");
  $(this).addClass("show-all");
});

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

Answer 1

我只会在同一个元素上进行两个绑定，因为它会与您单击以显示和隐藏相同的内容：

$(".show-all").click(function(e) {
  var link = $(this); // cache this for better performance
  if (link.text() === 'Show all') {
    $(".data").show();
    link.text("Hide all")
      .removeClass("show-all") // you can chain these, you don't need to put $(this) before each
      .attr('id', "hide-all"); // don't know if you still need this
  } else {
    $(".data").hide();
    link.text("Show all")
      .removeAttr("id")
      .addClass("show-all");
  }
});

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

<强>更新

正如您所说，这只是一个示例，您需要重新绑定 - 执行此操作的唯一方法是取消绑定先前的事件或使用.one，这样您只需绑定一个点击事件并重新绑定新事件点击点：

bindShow();

function bindShow() {
  $(".show-all").one('click', function(e) { // only bind one click - as it will change to a hide once clicked
    $(".data").show();
    $(this)
      .text("Hide all")
      .removeClass("show-all")
      .attr('id', "hide-all");
      
      bindHide();
  });
}

function bindHide() {
  $("#hide-all").one('click', function(e) {
    $(".data").hide();
    $(this)
      .text("Show all")
      .removeAttr("id")
      .addClass("show-all");
    
    bindShow();
  });
}

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

Answer 2

我认为您正在寻找一个toogle功能：

$('.toggle).on('click', function(e) {
    $(".data").toggle();
});

编辑：

问题是您已将事件附加到元素。即使您随后更改了元素的类/ ID，该事件也将保持附加状态。

但您可以将当前状态存储在变量中：

  var status = 0
  $(".btn").on("click", function() {
    if (status === 0) {
      $(this).html("Send Event 2");
      $("#output").html("Received Event 1");
      status = 1;
    } else {
      $(this).html("Send Event 1");
      $("#output").html("Received Event 2");
      status = 0;
    }
  });

请参阅此Plunker：https://plnkr.co/edit/bEn4q0RhrotEuo3RoaDa?p=preview

如果你不喜欢变量的想法，你可以在链接的data属性中设置一个标志：

<a href="#" class=".btn" data-status="0">

然后，您可以在每次单击时使用jQuery更改data-status属性。

Answer 3

你在这里 https://jsfiddle.net/rp5teg49/3/

$(".show-all").click(function(e) {
  $(".data").toggle('fast');
  if ($(this).text() === "Hide-All") {
    $(this).text("Show-All");
  } else {
    $(this).text("Hide-All");
  }
});

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

因为当您添加事件时，会调用2个事件

$(".data").hide(); 
$(".data").show();

您可以控制登录2事件并查看发生的事情

Answer 4

试试这个......

＆＃13;

$(document).on('click',".show-all",function(e) {
  $(".data").show();
  $(this).text("Hide-All");
  $(this).removeClass("show-all");
  $(this).attr('id', "hide-all");
});
$(document).on('click', "#hide-all", function(e) {
  $(".data").hide();
  $(this).text("Show-All");
  $(this).removeAttr("id");
  $(this).addClass("show-all");
});

＆＃13;

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

＆＃13;

Answer 5

＆＃13;

   

 $(".show-all").click(function(e) {
    if( $(this).attr('id')!='hide-all'){
    $(this).text("Hide-All");
      $(this).removeClass("show-all");
      $(this).attr('id', "hide-all");
      
      $(".data").show();
      }
    else{
   $(".data").hide();
   $(this).text("Show-All");
   $(this).removeAttr("id");
   $(this).addClass("show-all");

}
          });

＆＃13;

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

＆＃13;

JQuery停止点击事件

5 个答案: