2

テーブルに 3 つの列があり、それぞれ上部にテキストがあり、その下に画像があります。誰かが 3 つの列のいずれかから画像をクリックすると、列が拡大され、onClick イベントを使用して他の列が削除されるようにしています。ただし、画像をもう一度クリックすると、他の列が表示されるようにしたいです。私が抱えている問題は、onClick イベントを 2 回目にクリックしたときに別のことをさせる方法を考え出すことです。アイデアを提供するのに役立つように、（不十分な）描かれた写真をいくつか追加しました。御時間ありがとうございます。

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
}

等。

編集関数引数をブール値にするように微調整

乾杯

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

Jクエリ

$(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 に答える