jquery의 버튼 텍스트 토글
".pushme"버튼을 클릭하면 "Do n't push me"로 텍스트가 바뀝니다. 버튼을 다시 클릭하면 텍스트를 다시 "push me"로 바꾸고 싶습니다. 어떻게 할 수 있습니까?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button class='pushme'>PUSH ME</button>
<script>
$(".pushme").click(function () {
$(this).text("DON'T PUSH ME");
});
</script>
</body>
</html>
감사.
text방법 을 사용할 수 있습니다 .
$(function(){
$(".pushme").click(function () {
$(this).text(function(i, text){
return text === "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME";
})
});
})
다음 .toggle()과 같이 사용할 수도 있습니다 .
$(".pushme").toggle(function() {
$(this).text("DON'T PUSH ME");
}, function() {
$(this).text("PUSH ME");
});
http://api.jquery.com/toggle-event/ 에서 자세한 정보를 확인 하세요 .
이렇게하면 텍스트를 변경하거나 2 가지 이상의 다른 상태를 추가하기가 매우 쉽습니다.
해당 버튼에만 작업을 적용하려면 가능하면 사용자 지정 ID를 사용하십시오.
HTML
<button class="pushDontpush">PUSH ME</button>
jQuery
$("#pushDontpush").click(function() {
if ($(this).text() == "PUSH ME") {
$(this).text("DON'T PUSH ME");
} else {
$(this).text("PUSH ME");
};
});
작동하는 CodePen : 버튼의 텍스트 전환
With so many great answers, I thought I would toss one more into the mix. This one, unlike the others, would permit you to cycle through any number of messages with ease:
var index = 0,
messg = [
"PUSH ME",
"DON'T PUSH ME",
"I'M SO CONFUSED!"
];
$(".pushme").on("click", function() {
$(this).text(function(index, text){
index = $.inArray(text, messg);
return messg[++index % messg.length];
});
});
Demo: http://jsfiddle.net/DQK4v/2/
Use an if/else statement.. or ternary if you understand it
$(".pushme").click(function () {
var $el = $(this);
$el.text($el.text() == "DON'T PUSH ME" ? "PUSH ME": "DON'T PUSH ME");
});
$(".pushme").click(function () {
var button = $(this);
button.text(button.text() == "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME")
});
This ternary operator has an implicit return. If the expression before ? is true it returns "DON'T PUSH ME", else returns "PUSH ME"
This if-else statement:
if (condition) { return A }
else { return B }
has the equivalent ternary expression:
condition ? A : B
I preffer the following way, it can be used by any button.
<button class='pushme' data-default-text="PUSH ME" data-new-text="DON'T PUSH ME">PUSH ME</button>
$(".pushme").click(function () {
var $element = $(this);
$element.text(function(i, text) {
return text == $element.data('default-text') ? $element.data('new-text')
: $element.data('default-text');
});
});
If you're setting the button text by using the 'value' attribute you'll need to set
- $(this).val()
instead of:
- $(this).text()
Also in my situation it worked better to add the JQuery direct to the onclick event of the button:
onclick="$(this).val(function (i, text) { return text == 'PUSH ME' ? 'DON'T PUSH ME' : 'PUSH ME'; });"
You can also use math function to do this
var i = 0;
$('#button').on('click', function() {
if (i++ % 2 == 0) {
$(this).val("Push me!");
} else {
$(this).val("Don't push me!");
}
});
참고URL : https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
'developer tip' 카테고리의 다른 글
| Python에서 RGB 색상 튜플을 6 자리 코드로 변환 (0) | 2020.11.22 |
|---|---|
| rails install pg- 'libpq-fe.h 헤더를 찾을 수 없습니다. (0) | 2020.11.22 |
| MVC 3 문자열을 뷰의 모델로 전달할 수 없습니까? (0) | 2020.11.22 |
| 타임 스탬프로 핑 (0) | 2020.11.22 |
| UI없이 활동을 시작하는 방법은 무엇입니까? (0) | 2020.11.22 |