여러 항목이 포함 된 자바 스크립트 코드 간소화

Question

누구든지이 코드를 단순화하도록 도와 줄 수 있습니까?

바로 지금 새 항목을 업로드 할 때마다이 코드에 추가해야합니다. 요소 ID ("#rolly"또는 "#lagrimas")를 식별하고 코드 (.toggle ('show'))를 실행하는 스크립트가 하나만 있으므로 항목에 대한 상태.

또한이 작업이 PHP로 더 잘 수행되는지 알려 주시기 바랍니다. 그게 가능하다면 내가 ...

내가 매번에 추가 자바 스크립트를 자바 스크립트를 선호하지만 새 프로필 업로드이 거기있다 :

jQuery(document).ready(function(){ 

jQuery("#rolly").toggle('show'); 
jQuery("#lagrimas").live('click', function(lagrimas) {   
    jQuery("#rolly").toggle('show'); 
}); 

jQuery("#rodrigo").toggle('show'); 
jQuery("#ferber").live('click', function(ferber) {   
    jQuery("#rodrigo").toggle('show'); 
}); 

jQuery("#michael").toggle('show'); 
jQuery("#cruz").live('click', function(cruz) {   
    jQuery("#michael").toggle('show'); 
}); 

jQuery("#rodolfo").toggle('show'); 
jQuery("#paladin").live('click', function(paladin) {   
    jQuery("#rodolfo").toggle('show'); 
}); 

jQuery("#rommel").toggle('show'); 
jQuery("#abadiano").live('click', function(abadiano) {   
    jQuery("#rommel").toggle('show'); 
}); 
}); 

아래의 HTML 항목 중 하나의 예 (동안 위의 첫 번째 자바 스크립트에 해당) :

[btn_default_disabled id="lagrimas" class="btn" value="show/hide" fomable_id=3 default='Select' disabled='Reserved'] 
<br> 
<div id="rolly">[formidable id=3]</div> 

Answer 1

일반적인 클래스와 DOM 통과를 사용하면 코드를 더 DRY하게 만들 수 있습니다.

또한 live()은 긴 시간 전에 사용되지 않습니다. jQuery v3에서도 제거되었습니다. 나는 당신이 그것을 사용하지 않을 것을 강력히 제안 할 것이고, 당신의 jQuery 버전을 적어도 1.12로 업그레이드 할 것을 고려할 것이다.

$(".btn").on('click', function() {   
 
    $(this).next('.target').toggle(); 
 
});

.target { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="lagrimas" class="btn">Toggle</button> 
 
<div id="rolly" class="target">rolly</div> 
 

 
<button id="ferber" class="btn">Toggle</button> 
 
<div id="rodrigo" class="target">rodrigo</div>

Answer 2

그것은 당신이 업로드하여 질문에 새 항목을 의미합니까 무엇인지 조금 불분명하다. 추측을 기반으로 질문에 대답하겠습니다.

div와 버튼이 연결되어있는 것처럼 보입니다. 코드를 단순화하려면 클래스를 사용하여이 관계를 추상화 한 다음 id를 사용하는 대신 클래스 선택기를 사용하여 jquery 이벤트를 바인딩해야합니다.

샘플은 다음과 같습니다.

$(function() { 
 
    $('.display').toggle('show'); 
 
    $('.container').on('click', '.btn', function() { 
 
    $(this).siblings('.display').toggle('show'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button class="btn" id="lagrimas">Click lagrimas</button> 
 
    <div class="display" id="rolly"> 
 
     I am Rolly. 
 
     </div> 
 
    </div> 
 

 
<div class="container"> 
 
    <button class="btn" id="ferber">Click ferber</button> 
 
    <div class="display" id="rodrigo"> 
 
     I am Rodrigo. 
 
     </div> 
 
    </div>