Как можно оптимизировать этот код ? В общем сделать по человечески?

212

13 мая 2019, 05:50

Есть такой вот код на jQuery. Ломал голову не могу придумать как закодить всё тоже самое но более сжато. Подскажите пожалуйста. Два дня голову ломаю не могу понять как синхронизировать без ID клик по вкладкам и анимацию соответствующего им блока и картинки.

$(document).ready(function() { 
 
  $(".box_text").not(":first").hide(); 
  $(".infoImg").not(":first").hide(); 
 
 
  $('#detailsBtn1').click(function() { 
    $('#textBlock1').slideToggle(); 
    $('#textBlock2, #textBlock3').slideUp(); 
    $('#infoImg1').delay(300).fadeIn(); 
    $('#infoImg2, #infoImg3').fadeOut(300); 
    $('.angleUp', this).toggleClass('angle_active'); 
 
    if ($('#detailsBtn2 .angleUp, #detailsBtn3 .angleUp').hasClass('angle_active')) { 
      $('#detailsBtn2 .angleUp, #detailsBtn3 .angleUp').removeClass('angle_active'); 
    } 
 
  }) 
 
  $('#detailsBtn2').click(function() { 
    $('#textBlock2').slideToggle(); 
    $('#textBlock1, #textBlock3').slideUp(); 
    $('#infoImg2').delay(300).fadeIn(); 
    $('#infoImg1, #infoImg3').fadeOut(300); 
    $('.angleUp', this).toggleClass('angle_active'); 
 
    if ($('#detailsBtn1 .angleUp, #detailsBtn3 .angleUp').hasClass('angle_active')) { 
      $('#detailsBtn1 .angleUp, #detailsBtn3 .angleUp').removeClass('angle_active'); 
    } 
  }) 
 
  $('#detailsBtn3').click(function() { 
    $('#textBlock3').slideToggle(); 
    $('#textBlock1, #textBlock2').slideUp(); 
    $('#infoImg3').delay(300).fadeIn(); 
    $('#infoImg1, #infoImg2').fadeOut(300); 
    $('.angleUp', this).toggleClass('angle_active'); 
 
    if ($('#detailsBtn1 .angleUp, #detailsBtn2 .angleUp').hasClass('angle_active')) { 
      $('#detailsBtn1 .angleUp, #detailsBtn2 .angleUp').removeClass('angle_active'); 
    } 
  }) 
 
 
});

.serviceInfo { 
  display: flex; 
  flex-wrap: wrap; 
  margin-left: 10px; 
} 
 
.info_slide { 
  flex-grow: 1; 
  flex-basis: 300px; 
} 
 
.infoImg { 
  width: 96%; 
  height: auto; 
} 
 
.infoDetails { 
  flex-grow: 1; 
  flex-basis: 300px; 
  margin-left: 5px; 
  margin-right: 5px; 
} 
 
.details { 
  text-transform: uppercase; 
  font-size: 13px; 
  font-family: MontserratReg; 
  font-weight: bold; 
  position: relative; 
  margin-top: 10px; 
  border: 1px solid #E5E5E5; 
  cursor: pointer; 
} 
 
.details:first-child { 
  margin-top: 0; 
} 
 
.details i { 
  font-size: 31px; 
} 
 
.details h4 { 
  padding: 18px 0 8px 10.3%; 
} 
 
.details_icon { 
  color: #95e1d3; 
  position: absolute; 
  top: 12px; 
  left: 16px; 
} 
 
.angleUp { 
  color: #c3c3c3; 
  position: absolute; 
  right: 14px; 
  top: 14px; 
  transition: transform 1s; 
} 
 
.angle_active { 
  transform: rotate(90deg); 
} 
 
.box_text { 
  position: relative; 
  padding: 15px 10px 0px 20px; 
  border-left: 1px solid #e5e5e5; 
  border-right: 1px solid #e5e5e5; 
  border-bottom: 1px solid #e5e5e5; 
} 
 
.text_box { 
  font-family: roboto-exampleIt; 
  font-weight: italic; 
  color: #999999; 
  height: 164px; 
  width: 100%; 
  overflow: auto; 
  line-height: 1.7; 
  margin-bottom: 0; 
  padding-right: 3px; 
  padding-bottom: 20px; 
} 
 
.text_box span { 
  content: ''; 
  display: block; 
  background-color: black; 
  width: 50px; 
  height: 15px; 
  opacity: 0; 
} 
 
.shadow_box { 
  position: absolute; 
  background: linear-gradient(to top, white, rgba(255, 255, 255, 0.2)); 
  height: 40px; 
  width: 94.5%; 
  bottom: 1px; 
  left: 1px; 
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="serviceInfo"> 
  <div class="info_slide"> 
    <img class="infoImg" id="infoImg1" src="https://images.vfl.ru/ii/1543309034/7a6112ad/24370296.jpg" alt=""> 
    <img class="infoImg" id="infoImg2" src="https://images.vfl.ru/ii/1543309034/7623ee82/24370295.jpg" alt=""> 
    <img class="infoImg" id="infoImg3" src="https://images.vfl.ru/ii/1543309034/9f727e9a/24370297.jpg" alt=""> 
  </div> 
 
 
  <div class="infoDetails"> 
 
    <div class="details textActive" id="detailsBtn1"> 
      <i class="details_icon far fa-image"></i> 
      <h4>Photography</h4> 
      <i class="angleUp angle_active fas fa-angle-right"></i> 
    </div> 
 
    <div class="box_text" id="textBlock1"> 
      <p class="text_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> Lorem ipsum dolor sit amet <span></span></p> 
      <div class="shadow_box"></div> 
    </div> 
 
    <div class="details" id="detailsBtn2"> 
      <i class="details_icon far fa-image"></i> 
      <h4>creativity</h4> 
      <i class="angleUp fas fa-angle-right"></i> 
    </div> 
 
    <div class="box_text" id="textBlock2"> 
      <p class="text_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Duis aute irure dolor in reprehenderit in voluptate 
        velit esse cillum dolore eu <span></span></p> 
      <div class="shadow_box"></div> 
    </div> 
 
    <div class="details" id="detailsBtn3"> 
      <i class="details_icon far fa-image"></i> 
      <h4>web design</h4> 
      <i class="angleUp fas fa-angle-right"></i> 
    </div> 
 
    <div class="box_text" id="textBlock3"> 
      <p class="text_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate 
        velit esse cillum dolore eu fugiat nulla pariatur. <span></span></p> 
      <div class="shadow_box"></div> 
    </div> 
  </div> 
</div>

Answer 1

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

var b1 = $('#textBlock1');

это позволит находить элементы в дом контенте только раз и сократит время, в основном это подходит только для тех элементов которые вызываются несколько раз и конечно же минифицировать скрипт

Answer 2

window.onload = () => { 
  const y = document.getElementById('h'); 
  y.onclick = (e) => { 
    var t = e.target.parentNode.getElementsByClassName('content')[0]; 
 
    console.log(t); 
 
    if (t.classList.contains('show')) { 
      t.classList.remove('show'); 
      t.classList.add('hide'); 
      return; 
    } 
    if (t.classList.contains('hide')) { 
      t.classList.remove('hide'); 
      t.classList.add('show'); 
    } 
  } 
}

.content { 
	width: 400px; 
	background-color: tomato; 
	transition: .5s; 
} 
 
.show { 
	overflow: hidden; 
	transition: .5s; 
	height: 400px; 
} 
 
.hide { 
	transition: .5s; 
	height: 0px; 
	overflow: hidden; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <script src="./data.js"></script> 
    <title>Document</title> 
</head> 
<body> 
    <div> 
        <span id="h" style=" height: 40px; width: 200px;">Заголовок</span> 
        <div class="content show"> 
            Тут будет Ваш Контент 
            <br /> 
            Еще контент 
        </div>     
    </div> 
</body> 
</html>