Javascript onclick需要兩次點擊

Question

我有這個盒子，當點擊（獲得課程）時，它會在一個更大的盒子中進行轉換。 但它需要2次點擊，而不僅僅是一次，因為它需要采取。

.clientes {width:170px;height:27px;background-image:url('../imagens/clients.gif');-webkit-transition:1s;}
.clientes-clicked {width:356px !important;height:154px !important;background-image:url('../imagens/clients-big.png') !important;-webkit-transition:1s;}

<script>    
    var clientesclick = function(){
    $('.clientes').on('click', function(e) {
      $('.clientes').toggleClass("clientes-clicked"); //you can list several class names 
      e.preventDefault();
    });
    }
</script>

Answer 1

試試吧

<script>   
    $(document).ready(function() {
        $('.clientes').on('click', function(e) {
          $('.clientes').toggleClass("clientes-clicked"); //you can list several class names 
          e.preventDefault();
        });
    });
</script>

不太確定你為什么要將它分配給一個變量但它不會立即運行，而是在你調用該方法時執行它（我猜這是第一次點擊）然后你的dom元素將有事件（第二次點擊）。

使用$（document）.ready它將在所有dom准備就緒后運行，然后當你第一次點擊你的元素時，它們應該已經有了這個事件

Answer 2

你讓它變得比它需要的更復雜。 你可以這樣做：

$('.clientes').click(function(){
    $(this).toggleClass('clientes-clicked');
});

小提琴： http ： //jsfiddle.net/64XQ3/

而且，正如上面所指出的，你的jQuery應該包含在內

$(document).ready(function(){
    // code here
});