تغيير اسم العنصر بعد تبديل

Question

ولقد فعلت إخفاء وإظهار عنصر div، على النقر على عنصر

مع toggleIt فئة باستخدام وظيفة تبديل (). ولكن كيف لتغيير اسم العلامة ص بعد النقر عليه؟

لمثل لدي اسم 'إخفاء' للعلامة ص. على النقر على هذا I إخفاء شعبة. الآن، وأريد أيضا اسم للتغيير إلى "مشاهدة". كيف أفعل ذلك؟

<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

ووفقا لالشفرة التي نشرت أعلاه، وأنت لا تحاول تغيير سمة الاسم، وكنت تحاول تغيير قيمة النص / HTML داخلي للعنصر.

وانها فعلت ذلك من خلال الدعوة:

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