Как изменить название после нажатия на DIV

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>

У меня есть код, как это, и я хочу изменить слово «click» в "click again', что в первом DIV после нажатия на него , но я не знаю, как это сделать?

Answer 1

Используйте text() способ, как изменить текст.

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

Вы можете использовать .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>

Но вы можете получить скорость бит/производительность, изменив немного кода JS. Здесь вы используете jQuery для выбора ваших узлов DOM каждый раз, когда вы нажимаете. Так DOM access is really slow вы можете сохранить ссылку на переменную

(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

ответ Азим подводит его. Но так как некоторые новые разработчики не понимают, как работают троичные операции, вы можете добиться этого и с помощью старомодного выражения if else.

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