2

我在一个表中有 3 列，每列顶部都有一些文本，下面有一个图像。我有它，因此当有人从 3 列之一单击图像时，它会放大该列，并使用 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";
}
4

4 回答 4

3

你需要的是一个所有函数都可以访问的变量，它会告诉你你的表处于什么“模式”：

var allColumns = true;

function comedy() {
    if (allColumns) {
        // ... do stuff here ...
        allColumns = false;
    } else {
        // ... do different stuff here ...
        allColumns = true;
    }
}
于 2012-11-07T18:34:36.480 回答
1

如果您使用的是 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-07T18:36:09.270 回答
1

这样的事情将非常简单：

// 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-07T18:42:28.300 回答
1

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

HTML

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

CSS：

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

查询

$(document).ready(function(){
  $("#click").toggle(
   function(){
     $(this).css('width',200).siblings().hide();;
   },
   function(){
     $(this).css('width',50).siblings().show();;
   }
  );
})
于 2012-11-07T18:55:08.893 回答