문제
나는 클릭 할 때 div 요소의 숨기기와 쇼를했다.
toggle () 함수를 사용하여 클래스 토글이있는 요소. 그러나 P 태그 이름을 클릭 한 후 이름을 변경하는 방법은 무엇입니까?
예를 들어, 나는 p 태그의 '숨기기'로 이름을 가지고 있습니다. 이것을 클릭하면 나는 div를 숨 깁니다. 이제 이름이 '쇼'로 변경되기를 원합니다. 어떻게해야하나요?
<p class="toggleIt">Hide</p> //want this to change to 'Show' after clicking
$('.toggleIt').click(function(){
$('#common_fields').toggle();
});
해결책
나는 당신이 그 이름과 반대로 p 요소의 텍스트를 변경하려고한다고 생각합니다.
<p class="toggleIt">Hide</p> //want this to change to 'Show' after clicking
$('.toggleIt').click(function(){
$('#common_fields').toggle();
var thisElem = $(this);
thisElem.text(thisElem.text() === "Show" ? "Hide" : "Show");
});
다른 팁
$(".toggleIt").text("Show");
그것이 유일한 것인지 확인하십시오 <p>
"토글"클래스로 태그를 붙이지 않으면 다른 선택기를 사용해야합니다.
위에 게시 한 코드에 따르면 이름 속성을 변경하려고하지 않으므로 요소의 텍스트 값/innerhtml을 변경하려고합니다.
전화로 수행됩니다.
$('.toggleIt').click(function(){
$('#common_fields').toggle().text('Show');
});
실제로 이름 속성을 변경하고 싶다면 p
요소, 당신은 다음과 같습니다.
$('.toggleIt').click(function(){
$('#common_fields').toggle().attr('name', 'Show');
});
var toggleString = {
show:'Show',
hide:'Hide'
};
$('.toggleIt').toggle(function() {
$('#common_fields').hide();
$(this).text( toggleString.show );
}), function() {
$('#common_fields').show();
$(this).text( toggleString.hide );
});
제휴하지 않습니다 StackOverflow