每次点击一次，请进行一次on Click事件

Question

我在一个表中有3列，每个列在顶部有一些文本，下面有一个图像。我拥有它，以便当有人从3列之一中单击图像时，它会放大列，并使用ONCLICK事件删除其他列。但是，我想要它，以便第二次单击图像时，它会带回其他列。我遇到的问题是弄清楚如何使OnClick事件第二次单击它做些不同的事情。我添加了几张（糟糕的）绘制图片，以帮助您一个想法。感谢您的时间。

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

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

哦，以及我目前的JavaScript部分的代码（狗，万圣节和喜剧是每个图像的ID。/p>

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";
}

Answer 1

您需要的是一个可访问所有功能的变量，该变量将告诉您您的表格在：

中

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

Answer 2

类似的东西很简单：

// 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
}

等。

edit 调整以使函数arg a boolean

欢呼

Answer 3

如果您正在使用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/

Answer 4

简单地，请参阅小提琴演示

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();;
   }
  );
})