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>

调用的两个函数是color()和black()。无论如何我可以使用切换而不是这个if-else和javascript吗？

4

5 回答 5

1

您可以使用anchor元素的属性之一为您携带切换值（例如它的ID）。然后您就可以在一个ondoubleclick事件中包含所有必要的代码，而无需事先声明切换变量：

<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 回答
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 回答
0

您可以使用三元运算符：

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

（最好不在内联事件处理程序中）

于 2013-01-29T01:49:37.983 回答
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 
ondblclick='(toggle = ! toggle) ? alert("1") : alert("2");'>Double click here</a>

在此之前，您需要将切换设置为 true 或 false

于 2013-01-29T02:03:28.923 回答