jquery - 切换后更改元素的名称

Question

我已经完成了 div 元素的隐藏和显示，单击

通过使用 toggle() 函数，具有类 toggleIt 的元素。但是点击后如何更改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元素的 name 属性，您可以：

$('.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 );
});