javascript - 切换 css 和 html

Question

如何使这个 jQuery 函数适用于所有段落？我不想为每个段落做一个函数，因为它会动态增长。谢谢!

jQuery(document).ready(function() {
  jQuery('#alternar-respuesta1').on('click', function(event) {
    event.preventDefault();
    if (jQuery('p.tit_veel').hasClass("tit_grey")) {
      jQuery('p.tit_veel').removeClass("tit_grey").addClass("tit_blue");
      jQuery('#alternar-respuesta-ej1').removeClass("fa-angle-down tit_grey").addClass("fa-angle-up tit_blue");
    } else {
      jQuery('p.tit_veel').removeClass("tit_blue").addClass("tit_grey");
      jQuery('#alternar-respuesta-ej1').removeClass("fa-angle-up tit_blue").addClass("fa-angle-down tit_grey");
    }
    jQuery('#respuesta1').toggle('slow');
  });
});

#respuesta1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row mt60">
  <div id="veelges" class="col-md-10 col-md-offset-1">
    <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta1" class="fa fa-angle-down tit_grey" aria-hidden="true"></a></i>
    </p>
    <div id="respuesta">
      <p> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
    <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta2" class="fa fa-angle-down tit_grey" aria-hidden="true"></a></i>
    </p>
    <div id="respuesta2">
      <p> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
    <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta3" class="fa fa-angle-down tit_grey" aria-hidden="true"></a></i>
    </p>
    <div id="respuesta3">
      <p> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
    <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta4" class="fa fa-angle-down tit_grey" aria-hidden="true"></a></i>
    </p>
    <div id="respuesta4">
      <p> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
  </div>
</div>

Answer 1

我强烈建议重新组织代码。

1. 将两个段落都移到 DIV 中
2. 将 DIV 视为父元素。这样您就可以将标题/链接与文本结合起来。

按“运行代码片段”查看我的提议。

$(document).ready(function(){

	$('a.right.arrow').on('click', function(event) {
      event.preventDefault();
      var p = $(this).parent();
      
      if (p.hasClass("tit_grey")) {        
        p.removeClass("tit_grey").addClass("tit_blue");
        
        //$('#alternar-respuesta-ej1').removeClass("fa-angle-down tit_grey").addClass("fa-angle-up tit_blue");
      } else {
        p.removeClass("tit_blue").addClass("tit_grey");        
        //$('#alternar-respuesta-ej1').removeClass("fa-angle-up tit_blue").addClass("fa-angle-down tit_grey");
      }
      
      var div = p.parent();      
      div.children('.paragraph-txt') .toggle('slow');
   });
    
});

.paragraph-txt {
  display: none;
}

.tit_grey{ background: #CCC;}
.tit_blue{ background: #AAF;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row mt60">
  <div id="veelges" class="col-md-10 col-md-offset-1">
  
 <div id="respuesta1" >
  
  <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?
    <a class="right arrow" href="#">
      <i id="alternar-respuesta1" class="fa fa-angle-down tit_grey" aria-hidden="true">SHOW</i>
    </a>
  </p>
  
  <p class="paragraph-txt">
  Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    </p>
  </div>
    
    
    
    
    
    <div id="respuesta2" >
      
      <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta2" class="fa fa-angle-down tit_grey" aria-hidden="true">SHOW</i></a>
    </p>
    
      <p class="paragraph-txt"> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
   
    
    
    <div id="respuesta3" >
     <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta3" class="fa fa-angle-down tit_grey" aria-hidden="true">SHOW</i></a>
    </p>
    
      <p class="paragraph-txt"> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
    
     <div id="respuesta4" >
    <p class="tit_veel tit_grey">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit?<a class="right arrow" href="#"><i id="alternar-respuesta4" class="fa fa-angle-down tit_grey" aria-hidden="true">SHOW</i></a>
    </p>
   
      <p class="paragraph-txt"> Lorem ipsum dolor sit amet, consectetur. adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
  </div>
</div>

编辑 JSFIDDLE 上的相同代码 -> https://jsfiddle.net/o95dq69m/3/