Изменение имени элемента после переключения

Question

Я сделал скрытие и показ элемента div, щелкнув элемент

с классом toggleIt с помощью функции 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> с тегом &; toggleIt " класс или вам нужно будет использовать другой селектор.

Answer 4

Согласно приведенному выше коду, вы не пытаетесь изменить атрибут name, вы пытаетесь изменить текстовое значение / 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 );
});