做一个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事件，每隔一次点击做一些不同的事情？

回答

相关问题