Есть ли способ, которым я могу высушить этот код или использовать лучший подход для этого эффекта переключения - PullRequest
Новая
       42

Есть ли способ, которым я могу высушить этот код или использовать лучший подход для этого эффекта переключения

0 голосов
/ 01 ноября 2019

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

`<div class="we-do">
          <img class="icon" src="images/design_icon.png">
          <h5>DESIGN</h5>
          <div class="hide">
           <p class="clickable"> Our design practice offers a full range of services 
            including brand strategy,interaction and
            visual design and user experience testing</p>
          </div>
        </div>
        <div class="we-do">
          <img class="icon" src="images/dev_icon.png">
          <h5>DEVELOPMENT</h5>
          <div class="hide">
            <p class="clickable1">All engineers are fluent in the latest enterprise, mobile 
            and web development technologies.</p>
          </div>
        </div>
        <div class="we-do">
          <img class="icon" src="images/product_icon.png">
          <h5>PRODUCT MANAGEMENT</h5>
          <div class="hide">
            <p class="clickable2">Planning and development is iterative.
             requirements evolve.</p>
          </div>
        </div>enter code here

  $(".clickable").click(function() {
    $("#hide").slideToggle("slow");
    $("#icon").slideToggle("slow");
  })
  $(".clickable1").click(function() {
    $("#hide1").slideToggle("slow");
    $("#icon1").slideToggle("slow");
  })
  $(".clickable2").click(function() {
   $("#hide2").slideToggle("slow");
   $("#icon2").slideToggle("slow");
  })```

1 Ответ

0 голосов
/ 01 ноября 2019

Ваш html имеет контекст, определенный внешним div класса we-do. 

<div class="we-do">
  <img class="icon" src="images/design_icon.png">
  <h5>DESIGN</h5>
  <div class="hide">
    <p class="clickable">
      Our design practice offers a full range of services 
      including brand strategy,interaction and
      visual design and user experience testing
    </p>
  </div>
</div>

. Учитывая это, вам не нужны разные классы. Вам просто нужно правильно использовать contextual lookups. 

$('.clickable').on('click', function(e){
  // find the contextual parent to the elements
  var $weDo = $(e.target).closest('.we-do');

  // find the related elements
  var $hide = $weDo.find('.hide');
  var $icon = $weDo.find('.icon');

  // do your work
  $hide.slideToggle("slow");
  $icon.slideToggle("slow");
});
...