javascript - 当我用 jQuery 点击另一个元素时隐藏元素

编辑后的答案

因此，您遇到 OP 的最大问题是您没有尝试理解代码。许多新程序员（不幸的是，同样许多一直在编码的人）的一个大问题是他们就是我所说的抄写员。在 stackoverflow 上复制教程和答案可能会让您创建自己的网站、完成一些咨询工作，甚至支持您的整个职业生涯，但这与真正知道如何编程不同。

做关于 SO 的教程和提问是非常好的（事实上，这是我学到了我所知道的 90% 的方法），但你必须这样做，目的是从你发现的东西中学习，而不仅仅是为了完成你正在工作的东西在。我对您的建议是真正重新阅读我的原始答案（我在下面保持不变）并了解我展示的内容如何用于完成您想要的。 话虽如此，我完成了我开始的工作，所以让我们继续解决方案：

我已将您的 JSFIDDLE 复制到 Github 代码段中，以便您和未来的用户可以在答案中看到结果。我立即注意到的第一件事是，我的原始答案中的代码被复制到了您现有的 JS 中。虽然这很好，并且您正确地将“文本”更改为“_result”，但您错过了一些事情：

我的代码获取被点击元素的 ID，并使用它来查找应该不隐藏的元素的 ID。虽然您正确更改了查找代码以适合文本上的 ID，但您没有向被点击的图像添加任何 ID，因此我的代码无法执行任何操作。
您也没有删除最初用于实现此功能的 4 个函数，因此它看起来好像我的代码在做某事并且工作不正确，而实际上我的代码什么也没做，而您的代码仍在做它做的事情之前（虽然我肯定看到你之前在谈论什么错误）。
与我上面的复制编码器咆哮相关，请注意您和我如何以不同的方式解决问题以及您可以从中学到什么。
- 而您想通过查找它的类来为每个项目附加一个侦听器函数（这完全不相关，但您没有正确使用类和“mariage”等......更适合作为您仍然可以设置样式的 id 类）我选择将侦听器附加到单个类的所有元素，然后通过 id 查找它们。
- 您的解决方案要求您为添加的每个项目编写新的 JS 代码，并且每次编写这些函数时都存在拼写错误或忘记更改某些内容的风险。
- 我的解决方案允许您向 HTML 添加任意数量的元素，而无需更改 JS。只要您的图像有一个 id 并且文本的 id 等于“image id”+“_result”，功能就会自动发生。

我尝试尽可能少地修改您的代码，只需要删除 4 个函数并在图像中添加 ID（“mariage”和“amour”）即可让您的小提琴正常工作。

我从您的小提琴中删除的四个功能：

  // My toggle code for mariage_result ->text #1
  $(document).ready(function() {
    $('.mariage').click(function(event) {
      event.stopPropagation();
      $("#mariage_result").slideToggle("fast");
    });
    $("#mariage_result").on("click", function(event) {
      event.stopPropagation();
    });
  });

  $(document).on("click", function() {
    $("#result_mariage").hide();
  });

  // My toggle code for amour_result ->text #2
  $(document).ready(function() {
    $('.amour').click(function(event) {
      event.stopPropagation();
      $("#amour_result").slideToggle("fast");
    });
    $("#amour_result").on("click", function(event) {
      event.stopPropagation();
    });
  });

  $(document).on("click", function() {
    $("#amour_result").hide();
  });

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

最终代码：

// Test code to untoggle the previous element toggled
let lastClicked = null;

$(".hover_selection").click(function() {
  if (lastClicked) {
    lastClicked.hide();
  }

  let me = $("#" + this.id + "_result");
  me.show();
  lastClicked = me;
});

// slick slider option
$(document).ready(function() {
  $('.slider_index').slick({
    infinite: true,
    arrows: true,
    centerMode: true,
    slidesToShow: 1,
    variableWidth: true
  });
});

.tarif {
  width: 750px;
  text-align: left;
  margin: auto;
  margin-bottom: 30px;
  margin-top: 50px;
}

.result {
  display: none;
}

#mariage_result,
#amour_result,
#certificat_cadeau_result,
#maternite_result,
#portrait_result,
#commercial_result {
  width: 780px;
  height: auto;
  margin: auto;
}


/* -----------CSS SLIDER BELOW THIS POINT-----*/


/* Arrows */

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  bottom: 10px;
  display: block;
  width: 150px;
  height: 50px;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev:before,
.slick-next:before {
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: 25%;
  z-index: 9999;
}

[dir='rtl'] .slick-prev {
  right: 25px;
  left: auto;
}

.slick-prev:before {
  content: url('https://i.ibb.co/m9zR5YD/avant.png');
}

[dir='rtl'] .slick-prev:before {
  content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}

.slick-next {
  right: 25%;
  z-index: 9999;
}

[dir='rtl'] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}

[dir='rtl'] .slick-next:before {
  content: url('https://i.ibb.co/m9zR5YD/avant.png');
}

.slider_index {
  width: 100%;
  margin: auto;
}

.slider_index img {
  width: 100px;
  margin: auto;
  padding: 0px 20px 0px 20px;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}


/* Dots */

.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -40px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 30px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black;
}

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

<div class="titre_de_page">
  <p id="ancre">- Choisissez votre projet-photo -<br/>

  </p>
</div>

<div class="slider_index">

  <div>
    <img class="hover_selection mariage" id="mariage" src="https://via.placeholder.com/300" />
    <div class="caption_text">Mariage</div>
  </div>
  <div>
    <img class="hover_selection amour" id="amour" src="https://via.placeholder.com/300" />
    <div class="caption_text">Amour</div>
  </div>
  <div>
    <img class="hover_selection maternite" src="https://via.placeholder.com/300" />
    <div class="caption_text">Bedon + Bébé</div>
  </div>
  <div>
    <img class="hover_selection portrait" src="https://via.placeholder.com/300" />
    <div class="caption_text">Portrait</div>
  </div>
  <div>
    <img class="hover_selection commercial" src="https://via.placeholder.com/300" />
    <div class="caption_text">Commercial / Éditorial</div>
  </div>
  <div>
    <img class="hover_selection certificat_cadeau" src="https://via.placeholder.com/300" />
    <div class="caption_text">Certificat-cadeau</div>
  </div>
</div>
<br/>


<div class="result" id="mariage_result">

  <p class="all_texte tarif">
    My text to toggle number 1
    <br/><br/>

  </p>

</div>

<div class="result" id="amour_result">

  <p class="all_texte tarif">

    Toggle text number 2

  </p>

</div>

原始答案

据我了解您的问题，您只需要一个变量来跟踪先前单击的项目。至于我在下面的演示中所做的事情，我认为它与您想要做的事情足够接近，因为我们没有可以使用的样本。我想您可能与我的示例有很大不同的唯一部分是您如何查找，me因为我不知道您的 DOM 的确切结构或您的确切命名方案是什么。

let lastClicked = null;

$(".clickable").click(function() {
  if (lastClicked) {
    lastClicked.hide();
  }
  
  let me = $("#" + this.id + "text");
  me.show();
  lastClicked = me;
});

#root {
  width: 300px;
  height: 300px;
  background-color: black;
}

.text {
  display: none;
}

#one {
  width: 50px;
  height: 50px;
  background-color: red;
}

#two {
  width: 50px;
  height: 50px;
  background-color: green;
}

#three {
  width: 50px;
  height: 50px;
  background-color: blue;
}

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

<div id="root">
  <div class="clickable" id="one">
    <p class="text" id="onetext"> 1 </p> 
  </div>
  <div class="clickable" id="two">
    <p class="text" id="twotext"> 2 </p>
  </div>
  <div class="clickable" id="three">
    <p class="text" id="threetext"> 3 </p>
  </div>
</div>

javascript - 当我用 jQuery 点击另一个元素时隐藏元素

问题描述

解决方案

编辑后的答案

最终代码：

原始答案

推荐阅读