более короткий способ написания кода - видимость раздела по клику

Question

$(".link1").click(function(){
 $(".slide2, .slide3, .slide4, .slide5").css("opacity", 0.0);
$(".slide1").fadeTo("slow", 1.0);
  });
  $(".link2").click(function(){
 $(".slide1, .slide3, .slide4, .slide5").css("opacity", 0.0);
$(".slide2").fadeTo("slow", 1.0);
  });
  $(".link3").click(function(){
 $(".slide2, .slide1, .slide4, .slide5").css("opacity", 0.0);
$(".slide3").fadeTo("slow", 1.0);
  });
  $(".link4").click(function(){
 $(".slide2, .slide3, .slide1, .slide5").css("opacity", 0.0);
$(".slide4").fadeTo("slow", 1.0);
  });
  $(".link5").click(function(){
 $(".slide2, .slide3, .slide4, .slide1").css("opacity", 0.0);
$(".slide5").fadeTo("slow", 1.0);
  });

.slide1, .slide2, .slide3, .slide4, .slide5 {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  width: 50vw;
  height: 50vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  opacity: 0;
}

.link1, .link2, .link3, .link4, .link5 {
  width: 100px;
  height: 100px;
  margin-right: 133px;
  margin-left: 2px;
  padding-left: 0px;
}
.thumbWrapper{
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  padding-bottom: 0px;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <div class="thumbWrapper">
      <div><a href="#" class="link1"><img src="https://images.unsplash.com/photo-1578491133524-f33d9c7a7484?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1023&q=80" width="100"></a></div>
      <div><a href="#" class="link2"><img src="https://images.unsplash.com/photo-1587279063133-e65e2d8b849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" width="100" ></a></div>
      <div><a href="#" class="link3 w-inline-block"><img src="https://images.unsplash.com/photo-1587666146633-78b032acb7c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" width="100" ></a></div>
      <div><a href="#" class="link4"><img src="https://images.unsplash.com/photo-1587744709903-eb66fb650b8e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" width="100" ></a></div>
      <div><a href="#" class="link5"><img src="https://images.unsplash.com/photo-1543340771-9530d5b94554?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" width="100" ></a></div>
    </div>
       </div>
<div>
  <div class="slide1"><img src="https://images.unsplash.com/photo-1578491133524-f33d9c7a7484?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1023&q=80" width="200" ></div>
  <div class="slide2"><img src="https://images.unsplash.com/photo-1587279063133-e65e2d8b849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" width="200" ></div>
  <div class="slide3"><img src="https://images.unsplash.com/photo-1587666146633-78b032acb7c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" width="200" ></div>
  <div class="slide4"><img src="https://images.unsplash.com/photo-1587744709903-eb66fb650b8e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" width="200" ></div>
  <div class="slide5"><img src="https://images.unsplash.com/photo-1543340771-9530d5b94554?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" width="200" ></div>
  </div>
 

У меня будет 40 разных больших пальцев и 40 больших изображений, которые я поместил все на абсолютное с непрозрачностью, установленной на ноль. При щелчке пальца изображение должно исчезнуть. Я запустил некоторый код и работает (всего 5 ссылок), но мне кажется, что для моих 40 ссылок должен быть более короткий способ сделать это ... Любые идеи?

Спасибо Вы !!!

Я написал это до сих пор:

<script>
$(".link2").click(function(){
 $(".slide11, .slide1, .slide3, .slide44, .slide55, .slide66").css("opacity", 0.0);
$(".slide2").fadeTo("slow", 1.0);
  });
  $(".link1").click(function(){
 $(".slide2, .slide1, .slide3, .slide44, .slide55, .slide66").css("opacity", 0.0);
$(".slide11").fadeTo("slow", 1.0);
  });
  $(".link3").click(function(){
 $(".slide11, .slide1, .slide2, .slide44, .slide55, .slide66").css("opacity", 0.0);
$(".slide3").fadeTo("slow", 1.0);
  });
  $(".link4").click(function(){
 $(".slide11, .slide1, .slide3, .slide2, .slide55, .slide66").css("opacity", 0.0);
$(".slide44").fadeTo("slow", 1.0);
  });
  $(".link5").click(function(){
 $(".slide11, .slide1, .slide3, .slide44, .slide2, .slide66").css("opacity", 0.0);
$(".slide55").fadeTo("slow", 1.0);
  });
  </script>

Answer 1

Другой способ сделать то же самое (я положил заметки внутрь):

// just for demo - create 40 images and append them to DOM:
var i = 1;
while (i < 41) {
  var sliderEl = document.createElement("img"); 
  sliderEl.setAttribute('class','slider'); 
  sliderEl.setAttribute('src','https://via.placeholder.com/200x60.png?text=demoIMG'+i);
  sliderEl.addEventListener('click', showImg); // this would trigger on click 
  document.body.appendChild(sliderEl); 
  ++i;
}

// clicking one of the images will execute this function:
function showImg() {
  var sliders = document.querySelectorAll('.slider');
  for (var i=0; i < sliders.length; i++) {
    sliders[i].removeAttribute('style');
  }
  this.setAttribute('style', 'position: fixed; top: calc(50vh - 100px)  ; left: calc(50vw - 100px); transform: scale(2,2);');
};

.slider {display: block; border: 1px solid black; margin: 20px;}

Это будет быстрее устанавливать и манипулировать. Наслаждайтесь кодом!

Answer 2

Я бы посоветовал попытаться быть более склонным к ошибкам в вашем подходе. Рассмотрим следующее, которое также предлагает два разных способа мышления об анимации.

var c = document.getElementById('disp')
c.addEventListener('click', function(event) {
  document.querySelectorAll('.showOne div.active')
          .forEach( el => el.classList.remove('active'))
  event.target.classList.add('active')
})

.showOne div {
  opacity: 30%;
  transition: opacity 500ms;
}
.showOne div:hover {
  animation: anim-fade 1s ease;
  color: green;
}
.showOne div.active {
  color: red;
  opacity: 100%;
}

@keyframes anim-fade {
  0% {
    opacity: 30%;
  }
  100% {
    opacity: 100%;
  }
}

<div id="disp" class="showOne">
  <div> AAAA </div>
  <div> BBBB </div>
  <div> CCCC </div>
  <div> DDDD </div>
</div>

Answer 3

Да. Вы можете применить одно событие щелчка, получить родительский элемент для элемента clicked, загрузить индекс родительского элемента среди дочерних элементов элемента grandparent, чтобы мы знали, какой элемент должен быть показан, и скрываем его родные элементы:

$(".thumbWrapper > div > a").click(function() {
    var parent = this.parentNode;
    $(".slide" + ([...parent.parentNode.children].indexOf(parent) + 1)).fadeTo("slow", 1.0).siblings().css("opacity", 0.0);
})

Answer 4

Идея состоит в том, чтобы прикрепить прослушиватель события клика к родительскому элементу ваших ссылок, например,

<div id="thumbs-container">
    // links with ids like link1, link2 go here
</div>

И иметь одинаковые идентификаторы и классы для ссылок и слайдов, соответственно, т.е. #link4 будет соответствовать * 1005. *. Тогда:

var LINK_PREFIX = "link";
var SLIDE_CLASS_PREFIX = ".slide";

var totalSlides = 40;
var slides = [];

for (var slideNum = 1; slideNum <= totalSlides;  slideNum++) {
    slides.push(SLIDE_CLASS_PREFIX + slideNum);
}

var container = document.getElementById("thumbs-container");

container.addEventListener('click', (event) => {
    var targetId = event.target.id;

    if (targetId.indexOf(LINK_PREFIX) === -1) return; // optional check: not clicked on any link
    var slideNum = targetId.replace(LINK_PREFIX, "");

    var slideToFadeIn = SLIDE_CLASS_PREFIX + slideNum;
    var slidesToHide = slides.filter(slide => slide !== slideToFadeIn);

    $(slidesToHide.join(", ")).css("opacity", 0.0);
    $(slideToFadeIn).fadeTo("slow", 1.0);
});