Toggle innerHTML

Question

다양한 예제가 내가 찾고있는 것과 비슷하지만 그 중 정확히 어느 것도 정확히 설명하고 있지는 않습니다. 나는 jQuery의 초보자이므로 설명을 환영한다.

innerHTML을 -에서 +으로 토글하려고합니다. 누구든지이 일을 효율적으로 수행 할 수있는 방법을 알고 있습니까?

<div class="A1">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

jQuery를/자바 스크립트

$(document).ready(function() { 
      $(".A1").click(function() { 
       $(".P1").toggle("slow"); 
       $(".A1").html("+"); 
      }); 
     }); 

HTML 도움이된다 HTML 요소의 내부 텍스트를 전환과 관련, 아무것도 주셔서 감사합니다. =)

Answer 1

확대/축소 상태를 알 수있는 클래스를 추가하는 것은 어떻습니까?

HTML을

<div class="A1 expanded">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

자바 스크립트 :

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $this = $(this); 
     $(".P1").toggle("slow") 

     $this.toggleClass("expanded"); 

     if ($this.hasClass("expanded")) { 
      $this.html("-"); 
     } else { 
      $this.html("+"); 
     } 
    }); 
}); 

예 :http://jsfiddle.net/sGxx4/

Answer 2

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(".P1").toggle("slow"); 
     $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+"))); 
    }); 
}); 

설명의 비트 : 나는 #A1의 텍스트의 현재 값을 확인하기 위해 그것을 사용하여 차 연산자의 제품과 함께 $("#A1").html()을 설정하고있다. + 인 경우 요소의 텍스트를 -으로 설정하고, 그렇지 않으면 +으로 설정합니다.

그러나 당신은 "효율적으로"라고 말했습니다. 이를 위해 동일한 함수에서 셀렉터를 두 번 이상 사용하려는 경우 변수에 지정한 셀렉터의 결과 인 jQuery 객체를 저장해야하므로 매번 선택기를 다시 실행하십시오. 수정 된 코드는 다음과 같습니다.

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $A1 = $(".A1"); 
     $(".P1").toggle("slow"); 
     $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+"))); 
    }); 
}); 

Answer 3

콘텐츠를 전환 할 수있는 방법은 없습니다. $ ('. P1')이 보이는지 확인한 다음 +/- div를 변경하여 확인할 수 있습니다. 같은

뭔가 :

$(document).ready(function() { 
    $(".A1").click(function() { 
    $(".P1").toggle("slow", function(){ 
     if($(this).is(':visible')) 
      $(".A1").html("-") 
     else 
      $(".A1").html("+") 
    }); 
    }); 
}); 

애니메이션이 완료된 후 검사 있다는 것을 보장합니다 확인을 할 수있는 콜백 기능 (.toggle() 메서드의 두 번째 인수)를 사용.

JsFiddle : http://jsfiddle.net/cy8uX/

Answer 4

더 짧은 버전

다음은 부모와 CSS 규칙에 클래스 이름을 사용하고 HTML 내용을 변경하지 않고 컨테이너를 작동하는 방법이다

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $self = $(this); 
     $(".P1").toggle("slow", function () { 
      $self.html($self.html() == "-" ? "+" : "-"); 
     }); 
    }) 
}); 

Answer 5

및

HTML :

당신 때문에 클래스의 코드에만이 한 조각과 같은 페이지에서이 여러 사람을 가질 수 10

CSS :

.expanded .plus {display:none;} 
.collapsed .minus {display: none;} 

자바 스크립트 :

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(this).closest(".container") 
      .toggleClass("expanded collapsed") 
      .find(".P1").slideToggle("slow"); 
    }); 
}); 

근무 데모 :. http://jsfiddle.net/jfriend00/MSV4U/