Javascript 防止默认

Question

我想要一个阅读更多按钮。我知道我的代码中的问题是 e.preventDefault 仅对 readmore ID 启用，但我希望它对 more_content ID 启用。

$("#readmore_01").click(function(e) {
  e.preventDefault();
  $("#more_content_01").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") {
    $(this).html("Read more");
  }
});

$("#readmore_02").click(function(e) {
  e.preventDefault();
  $("#more_content_02").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") {
    $(this).html("Read more");
  }
});

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.img_01 {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}

.box {
  background-color: #d1d1d1;
}

.box_01 {
  grid-row: 1 / span 1;
  grid-column: 2 /span 1;
  margin-right: 15px;
  background-color: #d1d1d1;
}

.box_02 {
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
  background-color: #d1d1d1;
}

.content_01 {
  grid-row: 2 / span 1;
  grid-column: 1 / span 3;
  margin-top: 20px;
  background-color: #d1d1d1;
}

.toggleBtn_01 {
  cursor: pointer;
  color: #ff7c26;
  font-size: 115%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.toggleBtn_01:hover {
  color: white;
}

.more_content_01 {
  display: none;
  grid-column: 1 / span 3;
  background-color: #d1d1d1;
  grid-row: 3 / span 1;
  position: relative;
}

.img_02 {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
  margin-top: 20px;
}

.box_03 {
  grid-row: 3 / span 1;
  grid-column: 2 /span 1;
  margin-right: 15px;
  margin-top: 20px;
  background-color: #d1d1d1;
}

.box_04 {
  grid-row: 3 / span 1;
  grid-column: 3 / span 1;
  margin-top: 20px;
  background-color: #d1d1d1;
}

.content_02 {
  grid-row: 4 / span 1;
  grid-column: 1 / span 3;
  margin-top: 20px;
  background-color: #d1d1d1;
}

.toggleBtn_02 {
  cursor: pointer;
  color: #ff7c26;
  font-size: 115%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.toggleBtn_02:hover {
  color: white;
}

.more_content_02 {
  display: none;
  grid-column: 1 / span 3;
  background-color: #d1d1d1;
}

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>


<div class="wrapper">
  <div class="content_01" id="content_01">
    <div>Das ist ein toller Saugroboter</div>
    <div class="toggleBtn_01" id="toggleBtn_01">
      <i class="fa fa-plus" id="readmore_01"> Read more</i>
      <div class="more_content_01" id="more_content_01">
        <p style="display:none">Das ist mehr content</p>
      </div>
    </div>
  </div>

  <div class="content_02" id="content_02">
    <div>Das ist der zweite tolle Saugroboter</div>
    <div class="toggleBtn_02" id="toggleBtn_02">
      <i class="fa fa-plus" id="readmore_02">Read more</i>
      <div class="more_content_02" id="more_content_02">
        <p style="display:none">Das ich noch mehr content</p>
      </div>
    </div>
  </div>

  <div class="box_01">
    <p>DIE ERSTE BOX</p>
  </div>
  <div class="box_02">
    <p>DIE ZWEITE BOX</p>
  </div>
  <div class="box_03">
    <p>DIE DRITTE BOX</p>
  </div>
  <div class="box_04">
    <p>DIE VEIRTE BOX</p>
  </div>
  <div class="img_01">
    <img src="https://haushaltsautomatisierung.de/wp-content/uploads/2021/10/test.png">
  </div>
  <div class="img_02">
    <img src="https://haushaltsautomatisierung.de/wp-content/uploads/2021/10/test.png">
  </div>
</div>

<script src="https://haushaltsautomatisierung.de/wp-content/themes/bam-child/js/main.js" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 1

这是一个解决方案（据我了解）：

为more_content ID 创建点击事件，并在事件中调用e.preventDefault()。

然后，点击readmore，触发more_content上的点击事件（使用jQuery）。

当您点击 readmore 时，这将在该 ID 上运行 e.preventDefault。

使用 jQuery 触发事件的一个例子是使用.trigger()

$("selector").trigger(event);

event 将是元素上的注册事件。

这是一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button1">Click</button> <button class="button2">Don't click</button>

<script>
// Event called when ".button1" is clicked
$(".button2").on("click", function(event) {
  alert("Hopefully you pressed .button1");
});

$(".button1").on("click", function(event) {
  $(".button2").trigger("click");
});
</script>

使用纯 JavaScript：

<button class="button1">Click</button> <button class="button2">Don't click</button>

<script>
// Event called when ".button1" is clicked
document.querySelector(".button2").addEventListener("click", function(event) {
  alert("Hopefully you pressed .button1");
});

document.querySelector(".button1").addEventListener("click", function(event) {
  document.querySelector(".button2").click();
});
</script>

当然，纯 JavaScript 不会像 jQuery 那样拥有所有的事件触发器。

这是我整理的一个工作示例：

$("#more_content_01").click(function(e) {
  e.preventDefault();
});
$("#more_content_01").click(function(e) {
  e.preventDefault();
});
$("#readmore_01").click(function(e) {
  e.preventDefault();
  $("#more_content_01").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") {
    $(this).html("Read more");
  }
});

$("#readmore_02").click(function(e) {
  e.preventDefault();
  $("#more_content_02").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") {
    $(this).html("Read more");
  }
});