Wie der Titel zu ändern, auf einem div klicken

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>

ich meinen Code wie diese habe, und ich möchte das Wort ‚click‘ in "click again' ändern, die auf sie nach einem Klick in der ersten div sind aber ich weiß nicht, wie ich das erreichen soll?

Answer 1

Verwenden Sie text() Methode wie folgt, um Text zu ändern.

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

können Sie die .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>

verwenden Sie können aber durch Modifizieren eines Bit Ihr JS-Code ein bisschen Geschwindigkeit/Leistung. Hier verwenden Sie jQuery, um bei jedem Klick die DOM-Knoten auszuwählen. Da DOM access is really slow können Sie die Referenz in eine Variable speichern

(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

Azim Antwort bringt es auf. Aber da einige neue Entwickler nicht verstehen, wie ternäre Operationen funktionieren, können Sie es mit der altmodischen if else-Anweisung auch erreichen.

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