Скрыть элемент, когда я нажимаю на другой элемент с помощью jQuery - PullRequest
Новая
       24

Скрыть элемент, когда я нажимаю на другой элемент с помощью jQuery

0 голосов
/ 25 декабря 2018

Так что я хочу иметь функцию для переключения текста под моим изображением.Вот скрипт для переключения: 

$(document).ready(function(){
    $('.mariage').click(function(event){
        event.stopPropagation();
         $(".result_mariage").slideToggle("fast");
    });
    $(".result_mariage").on("click", function (event) {
        event.stopPropagation();
    });
});

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

Скрипт работает так, как задумано, за исключением случаев, когда пользователь щелкает по другой ссылке, которая делает другой переключатель информации, стек переключения вместо того, чтобы скрыть последнюю.Если я щелкну где-нибудь еще, кроме другого переключателя, информация будет скрыта, и все будет работать нормально.

(здесь изображение, на котором я нажимаю, чтобы вызвать «ошибку») Синим цветом показана другая ссылка, которая переключаетсявещи

Пример JS Fiddle:

https://jsfiddle.net/karg007/z6y54uro/

извините, если мой английский не очень хорош, это не мой основной язык.

Надеюсь, что эти объяснения были достаточно ясны для вас, чтобы помочь мне, даже если я сомневаюсь в этом: / Плз, не стесняйтесь спрашивать больше информации, чтобы я мог предоставить вам то, что вам нужно, чтобы помочь мне.

Итак, чтобы сделать его кратким,как мне сделать, чтобы скрыть мой предыдущий переключатель, когда я щелкаю свой новый?

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Насколько я понимаю из вашей проблемы, может быть, это поможет. 

$(document).ready(function(){
        var checker = false;
        $('.mariage').click(function(event){
            event.stopPropagation();
            if(!checker){
                $(".result_mariage").hide("slow");
                checker = true;
            }
            else{
                $(".result_mariage").show("slow");
                checker = false;
            }
        });
        $(".result_mariage").on("click", function (event) {
            event.stopPropagation();
        });

        $(document).on("click", function () {
            if(!checker){
                $(".result_mariage").hide("slow");
                checker = true;
            }
            else{
                $(".result_mariage").show("slow");
                checker = false;
            }
        }); 
    });
0 голосов
/ 25 декабря 2018

Отредактированный ответ

Итак, большая проблема, с которой вы сталкиваетесь в OP, заключается в том, что вы не пытаетесь понять код.Большая проблема со многими новыми программистами (и, к сожалению, точно так же, как и со многими, кто программировал вечно) - это то, что я называю Copy-Coders.Копирование руководств и ответов на stackoverflow может позволить вам создать свой сайт, выполнить несколько консультационных заданий или даже поддержать всю вашу карьеру, но это не то же самое, что умение программировать.

Выполнять учебные пособия и задавать вопросы по SO - это прекрасно (и именно так я узнал 90% того, что знаю), но вы должны сделать это с намерением узнать из чегоВы найдете, а не просто завершить то, над чем работаете.Я советую вам перечитать мой первоначальный ответ (я оставил его нетронутым ниже) и понять , как то, что я показал, может быть использовано для достижения того, что вы хотите. Сказав это, я заканчиваю то, что начинаю, так что давайте продолжим с решением:

Я скопировал ваш JSFIDDLE во фрагмент Github, чтобы вы и будущие пользователи могли видеть результат вответ.Первое, что я сразу заметил, это то, что мой код из исходного ответа был скопирован в ваш существующий JS.Хотя это нормально, и вы правильно изменили «текст» на «_result», вы пропустили несколько вещей:

  • Мой код берет идентификатор элемента, по которому щелкнули, и использует его для поиска идентификатора того, чтодолжно быть невидимымХотя вы правильно изменили код поиска, чтобы он соответствовал идентификаторам в вашем тексте, вы не добавляли идентификаторы к изображениям, по которым щелкали, поэтому мой код ничего не мог сделать.
  • Вы также не удалили4 функции, которые вы изначально использовали для реализации этой функции, чтобы она выглядела так, как будто мой код что-то делал и работает неправильно, хотя на самом деле мой код ничего не делал, а ваш код все еще делал то же, что и раньше (хотя я определенно вижу,о какой ошибке вы говорили раньше).
  • В связи с моей работой по копи-кодированию выше, обратите внимание, как вы и я оба подошли к проблеме по-разному и чему вы можете научиться из этого.
    • Принимая во внимание, что вы хотели прикрепить функцию слушателя к каждому элементу, просматривая его класс (который совершенно не связан, но вы не используете классы правильно и «mariage» и т. Д.) Лучше подходят как идентификаторы, которые вы можетепо-прежнему в стиле классов) Я решил присоединить слушателя ко всем элементам одного класса, а затем искать их по идентификатору.
    • Ваше решение требует, чтобы вы писали новый код JS для каждого добавляемого элемента, и запускаетриск написания ошибок или забывчивости что-то менять каждый раз, когда вы кодируете эти функции.
    • Мое решение позволяет вам добавлять столько элементов в HTML, сколько вы хотите, и нет необходимости менять JS.Пока ваши изображения имеют идентификатор, а текст имеет идентификатор, равный «идентификатору изображения» + «_result», функциональность происходит автоматически.

Я пытался изменитьваш код как можно меньше, и нужно было только удалить 4 функции и добавить идентификаторы («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>
...