Question

我在CSS3中有一个名为"tap"和"untap"的简单动画。

我通过" className"调用它，我正在尝试将其合并，以便onclick确实“点击”并onmouseout“重置”。

我有点击部分工作，但在else声明后它“不起作用”。我做错了什么？

<img src="picHere.gif" id="img7" onclick="if(this.className != 'tap') { this.className='tap'}  else {"onmouseout='this.className='untap'}; "/>

Answer 1

你只需要这个：

<img src="picHere.gif" id="img7" 
    onclick="if(this.getAttribute('class') !== 'tap') this.setAttribute('class','tap');" 
    onmouseout="if(this.getAttribute('class') === 'tap') this.setAttribute('class','untap');" />

如果您愿意，您实际上可以保留className。但需要注意的重要一点是，onclick和onmouseout事件是分开的。

Answer 2

您无法像这样交错事件处理程序。试试这个：

<img src="picHere.gif" id="img7" onclick="this.className='tap';" onmouseout='this.className='untap';" />

如果你愿意使用jQuery，你可以做一些这样的事情，它更干净：

<img src="picHere.gif" id="img7" />

// in your JavaScript code
$('#img7').click(function() { $(this).addClass('tap'); })
          .mouseout(function() { $(this).removeClass('tap'); });

Answer 3

这只是无效的标记。把它改成这样的东西：

<script type="text/javascript">
    function onclickHandler(sender) {
        if (sender.className != 'tap') { 
            sender.className = 'tap';
        }
        return false;
    }
    function onmouseoutHandler(sender) {
        if (sender.className == 'tap') {
            sender.className = 'untap';
        }
        return true;
    }
</script>
<img src="picHere.gif" 
     id="img7" 
     onclick="return onclickHandler(this);" 
     onmouseout="return onmouseoutHandler(this);" />

Javascript if / else onclick help

3 个答案: