Изменение имени элемента после переключения
Вопрос
Я сделал скрытие и показ элемента 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();
});
Решение
Я думаю, что вы намереваетесь изменить текст элемента 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");
});
Другие советы
Вам нужно знать, является ли элемент #common_fields
видимым или нет, чтобы чтобы получить правильное текстовое значение «Показать» или «Скрыть»:
$('.toggleIt').click(function(){
var $commonFields = $('#common_fields');
text = $commonFields.is(':visible') ? 'Show' : 'Hide';
$(this).text(text);
$commonFields.toggle();
});
Попробуйте приведенный выше фрагмент здесь .
$(".toggleIt").text("Show");
Убедитесь, что это единственный тег <p>
с тегом &; toggleIt " класс или вам нужно будет использовать другой селектор.
Согласно приведенному выше коду, вы не пытаетесь изменить атрибут name, вы пытаетесь изменить текстовое значение / 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 );
});