Question

表格中有3列，顶部有一些文字，下面有一张图片。我有它，以便当有人从3列中的一列中单击图像时，它会放大列，并使用onClick事件删除其他列。但是，我想要它，以便当我第二次单击图像时，它会带回其他列。我遇到的问题是弄清楚如何让onClick事件在我第二次单击它时做一些不同的事情。我添加了几张（画得不好）的照片，以帮助你了解一下。谢谢你的时间。

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

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

哦，我目前的javascript部分代码（狗，万圣节和喜剧是每张图片的ID。请原谅我的可怕（不存在）缩进;仍然在课堂上学习javascript。）：< / 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

如果你使用的是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 3

这样的事情非常简单：

// 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成为布尔值

干杯

Answer 4

简单地说，请参阅小提琴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();;
   }
  );
})

使onClick事件每隔一次点击做一些不同的事情？

4 个答案: