3

ダブルクリックすると別の色に変わる黒いテキストがあります。ダブルクリックで黒に戻せるようにしたい。今、私は持っています：

<script>
<h1 id="color"> I CHANGE COLORS! </h1>
<a href="javascript:void(0)" ondblclick="
        counter++;
        if(counter%2==1){color()} else {black()}
        ">Double click here</a>
</script>

呼び出される 2 つの関数はcolor()とblack()です。javascriptでこのif-elseの代わりにトグルを使用できる方法はありますか?

4

5 に答える 5

1

グローバルにアクセス可能なオブジェクトに関数を保存します。

functions = {};
functions[true] = black;
functions[false] = color;

black = true

次に、州旗を反転します。

<a href="javascript:void(0)" ondblclick="
        black = !black;
        functions[black]();
        ">Double click here</a>

これは非常に恣意的な要件を満たしますが、恐ろしい解決策です。

于 2013-01-29T01:53:34.137 に答える
1

要素のプロパティの1 つを使用anchorして、トグル値を保持できます (たとえば、 ですID)。ondoubleclick次に、トグル変数を事前に宣言しなくても、必要なすべてのコードを 1 つのイベントに含めることができます。

<h1 id="color"> I CHANGE COLORS! </h1>
<script>
  function black(id) { document.getElementById(id).style.color = 'black' }
  function red(id)  { document.getElementById(id).style.color = 'red' }
</script>
<a id="toggle_uninitialized" href="javascript:void(0)" ondblclick="(this.id=='toggled') ? this.id='not_toggled' : this.id='toggled';(this.id=='toggled') ? red('color') : black('color');">Double click here</a>

更新されたフィドル

編集: スペース文字を含まないように ID を変更しました。明らかに、このソリューションは、トグル スイッチとしてコード内で不要な (未使用の)他の既存の属性を使用するために採用できます。anchor element

于 2013-01-29T01:46:43.653 に答える
0

http://jsfiddle.net/t6BUE/

<style> .black {color: black;} .red {color: red;}</style>
<div id="color" class="black">test</div>

<input type="button" name="button" value="Change"
onClick="document.getElementById('color').className = (document.getElementById('color').className=='red') ? 'black' : 'red';">

style.colorどうやらブラウザがこの値を変更する可能性があるため、値をチェックしないことをお勧めします。(Chrome でテストしたところ、#FF0000 が rgb(255,0,0) に変更されました。これにより、さまざまなブラウザーでその値に対するチェックが予測できなくなります。代わりに、クラスをチェックすることをお勧めします。

于 2013-01-29T01:53:46.540 に答える
0

三項演算子を使用できます。

this.style.color = this.style.color == '#000000' ? '#ff0000' : '#000000';

(できればインライン イベント ハンドラーではない)

于 2013-01-29T01:49:37.983 に答える
0 
ondblclick='(toggle = ! toggle) ? alert("1") : alert("2");'>Double click here</a>

その前に、toggle を true または false に設定する必要があります

于 2013-01-29T02:03:28.923 に答える