Question

我有黑色文字，双击时会改变为不同的颜色。我希望它能够在双击时变回黑色。现在，我有：

<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？

Answer 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>

updated fiddle

编辑：将ID更改为不包含空格字符。显然，可以采用此解决方案来使用任何其他现有anchor element属性，否则代码中不需要（未使用）作为切换开关。

Answer 2

将函数存储在全局可访问的对象中：

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

black = true

然后反转你的州旗：

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

虽然这满足了你非常随意的要求，但这是一个可怕的解决方案。

Answer 3

您可以使用ternary operator：

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

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

Answer 4

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）;这使得在不同浏览器中检查该值无法预测。我建议改为检查类。

Answer 5

ondblclick='(toggle = ! toggle) ? alert("1") : alert("2");'>Double click here</a>

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

如何将if-else语句更改为切换？

5 个答案: