토글링 후 요소의 이름을 변경합니다

Question

나는 클릭 할 때 div 요소의 숨기기와 쇼를했다.

toggle () 함수를 사용하여 클래스 토글이있는 요소. 그러나 P 태그 이름을 클릭 한 후 이름을 변경하는 방법은 무엇입니까?

예를 들어, 나는 p 태그의 '숨기기'로 이름을 가지고 있습니다. 이것을 클릭하면 나는 div를 숨 깁니다. 이제 이름이 '쇼'로 변경되기를 원합니다. 어떻게해야하나요?

<p class="toggleIt">Hide</p> //want this to change to 'Show' after clicking

$('.toggleIt').click(function(){

     $('#common_fields').toggle();

});

Answer 1

나는 당신이 그 이름과 반대로 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");
});

Answer 2

당신은 있는지 알아야합니다 #common_fields 요소입니다 보이는 또는 올바른 '쇼'또는 '숨기기'텍스트 값을 얻기 위해 :

$('.toggleIt').click(function(){
  var $commonFields = $('#common_fields');
      text = $commonFields.is(':visible') ? 'Show' : 'Hide';

  $(this).text(text);
  $commonFields.toggle();
});

위의 스 니펫을 사용해보십시오 여기.

Answer 3

$(".toggleIt").text("Show");

그것이 유일한 것인지 확인하십시오 <p> "토글"클래스로 태그를 붙이지 않으면 다른 선택기를 사용해야합니다.

Answer 4

위에 게시 한 코드에 따르면 이름 속성을 변경하려고하지 않으므로 요소의 텍스트 값/innerhtml을 변경하려고합니다.

전화로 수행됩니다.

$('.toggleIt').click(function(){
     $('#common_fields').toggle().text('Show');
});

실제로 이름 속성을 변경하고 싶다면 p 요소, 당신은 다음과 같습니다.

$('.toggleIt').click(function(){
     $('#common_fields').toggle().attr('name', 'Show');
});

Answer 5

var toggleString = {
    show:'Show',
    hide:'Hide'
};

$('.toggleIt').toggle(function() {
    $('#common_fields').hide();
    $(this).text( toggleString.show );
}), function() {
    $('#common_fields').show();
    $(this).text( toggleString.hide );
});