nasıl bir div tıkladıktan sonra başlığını değiştirmek

Question

$('.showlink').click(function() { 
 
    $('.box').slideToggle(300); 
 
});

.box { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="showlink">click</div> 
 
<div class="box">content</div>

böyle kodumu var ve ben bunun üzerine tıkladıktan sonra ilk div var click again' 'sözcüğünü 'click' değiştirmek istiyorum ama bunu nasıl başaracağımı bilmiyorum?

Answer 1

Metni değiştirmek için aşağıdaki gibi text() yöntemini kullanın.

$('.showlink').click(function() { 
 
    var text = $(this).text().trim(); 
 
    $(this).text(text == 'click' ? 'click again' : 'click'); 
 
    $('.box').slideToggle(300); 
 
});

.box { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="showlink">click</div> 
 

 
<div class="box">content</div>

Answer 2

Sen .text method of jQuery

$('.showlink').click(function() { 
 
    $(this).text("Click again"); 
 
    $('.box').slideToggle(300); 
 
});

.box { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="showlink">click</div> 
 

 
<div class="box">content</div>

kullanabilirsiniz Ama biraz da JS kodu değiştirerek biraz hız/performans alabilirsiniz. Burada, her tıklattığınızda DOM düğümlerinizi seçmek için jQuery'yi kullanırsınız. DOM access is really slow beri Azim cevabı özetliyor bir değişken

(function() { 
 
    "use strict"; 
 

 
    var $showLink = $('.showlink'); 
 
    var $box = $('.box'); 
 
    $showLink.click(function() { 
 
    $showLink.text("Click again"); 
 
    $box.slideToggle(300); 
 
    }); 
 

 
})();

.box { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="showlink">click</div> 
 

 
<div class="box">content</div>

Answer 3

içine referans kaydedebilirsiniz. Ancak bazı yeni geliştiriciler, üçlü işlemlerin nasıl çalıştığını anlayamadıklarından, eski moda ifadesi ile de bunu gerçekleştirebilirsiniz.

HTML:

<div class="showlink">click</div> 
<div class="box">content</div> 

jQuery:

$(".box").hide(); 
$(".showlink").click(function(){ 
    $(".box").toggle(); 
    if($(".showlink").click){ 
    $(".showlink").text("click again"); 
    } if ($(".box").css("display") == "none") { 
    $(".showlink").text("click"); 
    } 
}); 

Working demo