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に移動両方段落。この方法で、ヘッダー/リンクをテキストに結合することができます。

"RUN CODE SNIPPET"を押すと、私の提案が実際に表示されます。

$(document).ready(function(){ 
 

 
\t $('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>

EDIT JSFIDDLE上の同じコード - >https://jsfiddle.net/o95dq69m/3/