jQuery点击隐藏多个div

Question

每当我点击“click hier”时，带有"class=cirkel1"的div和带有"class=bewegendetekst"的div都会显示出来。但是当我想要点击“click back”时，它们就不会消失。

我尝试使用toggle函数，但那只会使情况变得更糟。

所以我的问题是，当我点击“click back”时，如何让带有"class=cirkel1"和"class=bewegendetekst"的div消失？

$(document).ready(function() {
  $(".blok1").click(function() {
    $(".blok2").toggle("slow");
    $(".blok3").toggle("slow");
    $(".blok4").toggle("slow");
  });
  $(".blok1").click(function() {
    if ($(this).width() != 500)
      $(this).animate({
        width: 500
      }, 1000);
    else
      $(this).animate({
        width: 250
      }, 1000);
  });
  $(".blok1").click(function() {
    if ($(this).height() != 500)
      $(this).animate({
        height: 500
      }, 1000);
    else
      $(this).animate({
        height: 250
      }, 1000);
  });
});

$(document).ready(function() {
  $("p").on("click", function() {
    var el = $(this);
    setTimeout(function() {
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    }, 1000);
  });
});


$(document).ready(function() {
  $(".cirkel1").click(function() {
    $(".bewegendetekst").show("slow");
  });
});

$(document).ready(function() {
  $(".witte-tekst").click(function() {
    $(".cirkel1").show("slow");
  });
  $(".cirkel1").click(function(e) {
    e.stopPropagation();
    $(".cirkel1").hide("slow");
  });
});

.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
.witte-tekst {
  color: #fff;
}
.cirkel1 {
  border-radius: 50%;
  background-color: #000;
  height: 125px;
  width: 125px;
  position: absolute;
}
.bewegendetekst {
  color: #fff;
  height: 125px;
  width: 250px;
  background-color: #000;
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'>
    <p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
    <div class='cirkel1' style="display:none"></div>
    <p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
  </div>
  <div class='blok2'></div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

- simon schaminee

---

为什么会有这么多 $(document).ready(function(){ ？ - Monasha

你误用了类似于id的类，你应该重构所有的CSS和JS。你说的“click back”是什么意思？ - sandrooco

@KevinKloet 它确实有作用，只是第一个重载不行。 - sandrooco

@Monasha 这是我尝试编写 JQuery 的第一周，所以我使用了很多函数。我会努力改进的！ - simon schaminee

Answer 1

使用jQuery的toggle()方法，当您点击“Click Back”按钮时，可以show/hide圆圈：

$(".witte-tekst").click(function() {
   $(".cirkel1").toggle("slow");
})

注意：一个准备好的函数就足够了。

希望这可以帮助你。

$(document).ready(function() {
  $(".blok1").click(function() {
    $(".blok2").toggle("slow");
    $(".blok3").toggle("slow");
    $(".blok4").toggle("slow");
  });
  $(".blok1").click(function() {
    if ($(this).width() != 500)
      $(this).animate({
        width: 500
      }, 1000);
    else
      $(this).animate({
        width: 250
      }, 1000);
  });
  $(".blok1").click(function() {
    if ($(this).height() != 500)
      $(this).animate({
        height: 500
      }, 1000);
    else
      $(this).animate({
        height: 250
      }, 1000);
  });

  $("p").on("click", function() {
    var el = $(this);
    setTimeout(function() {
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    }, 1000);
  });


  $(".cirkel1").click(function() {
    $(".bewegendetekst").show("slow");
  });

  $(".witte-tekst").click(function() {
    $(".cirkel1").toggle("slow");
  });
  $(".cirkel1").click(function(e) {
    e.stopPropagation();
    $(".cirkel1").hide("slow");
  });
});

.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
.witte-tekst {
  color: #fff;
}
.cirkel1 {
  border-radius: 50%;
  background-color: #000;
  height: 125px;
  width: 125px;
  position: absolute;
}
.bewegendetekst {
  color: #fff;
  height: 125px;
  width: 250px;
  background-color: #000;
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'>
    <p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
    <div class='cirkel1' style="display:none"></div>
    <p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
  </div>
  <div class='blok2'></div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

- Zakaria Acharki

---

这不是你要找的答案吗？ - Zakaria Acharki

Answer 2

hide() 函数用于隐藏元素

$('#yourdiv').hide();

- Saad Suri

Answer 3

它将在再次点击时隐藏回去。

 $(".witte-tekst").click(function() {
        $(".cirkel1").toggle( "slow" );
});

- prasanth