Блог

Прекрасный пользователь stackoverflow помог мне разобраться в этом коде jQuery, но моя единственная проблема сейчас заключается в том, что оба изображения появляются одновременно, если пользователь дважды щелкает по изображению. Есть ли способ избежать одновременного появления обоих изображений? Возможно, двойной щелчок также должен вызывать то же событие, что и один щелчок?

    $(document).ready(function () {
  $(".fruitcontainer").click(function () {
    let fruit = $(this).find(".fruit");
    let fruitbag = $(this).find(".fruitbag");

    if (fruit.is(":visible")) {
      fruit.fadeToggle(800, function () {
        fruitbag.each(function () {
          $(this).fadeToggle(800);
        });
      });
    } else {
      fruitbag.fadeToggle(800, function () {
        fruit.fadeToggle(800);
      });
    }
  });

  $("#showNames").click(function () {
    $(".fruitname").fadeToggle();
  });
});
img {
  width: 200px;
  height: auto;
}

ul {
  list-style-type: none;
  text-align: center;
  display: flex;
  flex-direction: row;
}
li {
  display: inline;
}

.fruitbag,
.fruitname {
  display: none;
}
.fruitname {
  margin-bottom: -2em;
}
.fruitcontainer {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showNames">Names</button>
<ul>
  <li class="fruitcontainer">
    <img class="fruit" src="https://via.placeholder.com/200x200.png?text=apple.png" />
    <img class="fruitbag" src="https://via.placeholder.com/200x200.png?text=applebag.png" />
    <p class="fruitname">apple</p>
  </li>

  <li class="fruitcontainer">
    <img class="fruit" src="https://via.placeholder.com/200x200.png?text=lemon.png" />
    <img class="fruitbag" src="https://via.placeholder.com/200x200.png?text=lemonbag.png" />
    <p class="fruitname">lemon</p>
  </li>

  <li class="fruitcontainer">
    <img class="fruit" src="https://via.placeholder.com/200x200.png?text=lime.png" />
    <img class="fruitbag" src="https://via.placeholder.com/200x200.png?text=limebag.png" />
    <p class="fruitname">lime</p>
  </li>
</ul>
 

https://codepen.io/Bes7weB/pen/BaLQvJx

Ваша проблема вызвана несколькими щелчками во время выполнения события. Один из способов обойти это — предотвратить многократные щелчки, создав глобальную переменную, которая имеет логический флаг, который устанавливается в начале и конце функции.

Например:

 var IsClickInProgrress =  false;

$(document).ready(function () {
  $(".fruitcontainer").click(function () {
    if(!IsClickInProgrress){
    ToggleIsClickInProgrress()
 
    let fruit = $(this).find(".fruit");
    let fruitbag = $(this).find(".fruitbag");

    if (fruit.is(":visible")) {
      fruit.fadeToggle(800, function () {
        fruitbag.each(function () {
          $(this).fadeToggle(800);          
        },ToggleIsClickInProgrress());
      });
    } else {
      fruitbag.fadeToggle(800, function () {
        fruit.fadeToggle(800, "swing", ToggleIsClickInProgrress());
      });
    }
    }
  });

  function ToggleIsClickInProgrress()
  {
    IsClickInProgrress = !IsClickInProgrress
  }
  
  $("#showNames").click(function () {
    $(".fruitname").fadeToggle();
  });
});