用JavaScript點擊更改DIV中的文本

我有一個包含文本的按鈕。點擊此按鈕後，點擊3次後將被禁用（不可點擊）。此外，按鈕文本必須在每次點擊時更改。用JavaScript點擊更改DIV中的文本

見我的例子（按渲染以瞭解其工作）： http://jsbin.com/univu3/edit#source

現在我想這個相同的功能，但然後用DIV。這是我的javascript代碼，到目前爲止，我還熟了起來：

//Hint 
function hint() { 
var count = 3 

if(count==0) { 
     $(this).addClass('disabled'); 
    };

我的div：

<div class="ht">HINT (3)</div>

於是經過3次點擊的（3）必須（0）和類「禁用」必須是加載（使DIV看上去像是被禁用。

任何想法如何TP拉這一關？

謝謝您的時間

個

PS我使用jQuery太

來源

2012-01-26 Maurice

禁用的屬性僅適用於輸入元素。 – j08691 2012-01-26 22:33:57

你的例子對我來說工作得很好。問題究竟是什麼？ – JohnFx 2012-01-26 22:38:32

尼斯和短。 [updated]

$('.ht').click(function(){ 
    var $this = $(this); 
    var pos = parseInt($this.text().match(/\d+/g)[0]) //use regex to pull the number out; 

    if(!pos) return false; 

    $this.text($this.text().replace(pos, --pos)) 

    if(!pos){ 
     $this.addClass('disabled'); 
    } 
})

http://jsfiddle.net/brentmn/MsQMs/1/

來源

2012-01-26 22:53:15

看起來不錯，但它不會停止倒計時，當它擊中0 – Maurice 2012-01-26 23:05:21

感謝您捕捉。我更新了答案和小提琴。 – 2012-01-26 23:30:13

這很好，謝謝！ – Maurice 2012-01-27 22:34:16

你可以做這樣的事情：

var count=0 
$('.ht').click(function(){  
count++;  
if (count == 1){$('.ht').html('hint 1');}  
if (count == 2) {$('.ht').html('hint 2');}  
if (count == 3) {$('.ht').html('hint 3'); 
$(.ht).addClass('disabled');} 
});

來源

2012-01-26 22:38:31 Mike

var hintcount = $('.ht span'), 
    availableHint = hintcount.html() | 0; 

$('.ht').on('click.threetimes', function() { 
    if (availableHint--) { 
     hintcount.html(availableHint); 
    } 
    else { 
     $(this).off('click.threetimes').addClass('disabled'); 
    } 
}); 



<div class="ht">HINT (<span>3</span>)</div>

來源

2012-01-26 22:43:15 fcalderan

這是我會怎麼做（沒有JQuery的）：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

</head> 
<body> 

<div id="div">Stop clicking me!</div> 

<script> 

document.getElementById("div").addEventListener("click", function listener() { 

    //Get the current 'clicksSoFar' attribute on the div. 
    var clicks = +this.getAttribute("clicksSoFar"); 

    //Add to its number of clicks. 
    clicks++; 

    //If it's greater or equal to 3, 
    if(clicks >= 3) { 

     //Gray out the div here (or something) and remove the listener 

     // --- YOUR CODE HERE --- 

     this.removeEventListener("click", listener, true); 

    } 

    //Set the clicksSoFar attribute to the new number of clicks 
    this.setAttribute("clicksSoFar", clicks); 


}, true); 

</script> 

</body> 
</html>

來源

2012-01-26 22:43:32

用JavaScript點擊更改DIV中的文本

回答

相關問題