有没有办法我可以干掉这段代码或使用更好的方法来实现这种切换效果

Question

我想制作一个切换效果，当您单击一个图标时，它会显示一些文本并且该图标会切换。当您单击新显示的文本时，文本会切换并返回图标。

`<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");
  })```

Answer 1

您的 html 具有由 we-do 类的外部 div 定义的上下文。

<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");
});