做一個onClick事件，每隔一次點擊做一些不同的事情？

我在表中有3列，每個列都有一些文字在頂部，下面有一張圖片。我擁有它，這樣當有人點擊3列中的一列圖像時，它將放大列，並使用onClick事件刪除其他列。但是，我希望它能夠在第二次點擊圖像時帶回其他列。我遇到的問題是弄清楚如何讓onClick事件在第二次單擊時做出不同的事情。我添加了一些（很差）繪製的圖片來幫助給你一個想法。謝謝你的時間。做一個onClick事件，每隔一次點擊做一些不同的事情？

http://i.minus.com/ijFBpWavY386c.jpg

http://i.minus.com/iNExaX8dsN5dK.jpg

哦，我現在對JavaScript的部分代碼（狗，萬聖節，和喜劇是每個圖像的ID和請原諒我的可怕的（不存在的）縮進。仍處於一類學習JavaScript）：

function dog() 
{ 
td12 = document.getElementById('td2'); 
td12.parentNode.removeChild(td12); 

td13 = document.getElementById('td3'); 
td13.parentNode.removeChild(td13); 

td11 = document.getElementById('td1'); 
td11.style.textAlign = "center"; 
} 
function halloween() 
{ 
td21 = document.getElementById('td1'); 
td21.parentNode.removeChild(td21); 

td23 = document.getElementById('td3'); 
td23.parentNode.removeChild(td23); 

td22 = document.getElementById('td2'); 
td22.style.textAlign = "center"; 
} 
function comedy() 
{ 
td31 = document.getElementById('td1'); 
td31.parentNode.removeChild(td31); 

td32 = document.getElementById('td2'); 
td32.parentNode.removeChild(td32); 

td33 = document.getElementById('td3'); 
td33.style.textAlign = "center"; 
}

來源

2012-11-07 Broodyr

因爲我還不熟悉javascript，所以我並不知道該怎麼嘗試。我搜索了我在Google和這裏的標題（以及輕微的變體）中的內容，但找不到任何相關內容。 – Broodyr

你需要的是一個變量，它是所有的功能，這會告訴你什麼「模式」你的表是訪問：

var allColumns = true; 

function comedy() { 
    if (allColumns) { 
     // ... do stuff here ... 
     allColumns = false; 
    } else { 
     // ... do different stuff here ... 
     allColumns = true; 
    } 
}

來源

2012-11-07 18:34:36 slashingweapon

謝謝！其他答案也很有用，但這是最簡單的，並不需要jQuery。 – Broodyr

@Broodyr如果其他答案有幫助，我會建議對他們進行投票。 – Madbreaks

如果你正在使用jQuery，你可以做這樣的事情：

function bindImageClick(){  
    $("#imgid").unbind("click"); 
    $("#imgid").bind("click", function (event) { 
     alert("first click"); 
     $(this).unbind("click"); 
     $(this).bind("click", function(){ 
      alert("second click"); 
      bindImageClick(); 
     }); 
    }); 
} 
bindImageClick();

活生生的例子在這裏：http://jsfiddle.net/4zKNJ/3/

來源

2012-11-07 18:36:09 glhrmbhnrt

您可能想要限制這些綁定/解除綁定調用。雖然看起來不像op是使用jQuery。 – Madbreaks

像這樣的事情會很簡單：

// Put this within the scope of the <a /> below... 
var whichClick = 1; 

// The link 
<a href="..." onclick="javascript:doSomething(whichClick++ % 2 == 1)">Click Me</a> 

// The handler 
function doSomething(isOdd){ 
    // isOdd is true or false, respond accordingly 
}

等等

編輯調整，以使功能ARG一個布爾

乾杯

來源

2012-11-07 18:42:28 Madbreaks

它簡單地說，見小提琴demo

HTML

<table> 
<tr> 
    <td>Column1</td> 
    <td id="click">Column2</td> 
    <td>Column3</td> 
</tr> 
</table>

CSS：

td{ 
    border:1px dotted #ccc; 
    width:50px 
}

JQUERY

$(document).ready(function(){ 
    $("#click").toggle(
    function(){ 
    $(this).css('width',200).siblings().hide();; 
    }, 
    function(){ 
    $(this).css('width',50).siblings().show();; 
    } 
); 
})

來源

2012-11-07 18:55:08 Rajnish

做一個onClick事件，每隔一次點擊做一些不同的事情？

回答

相關問題