Hinzufügen aktive Klasse zu einem Element onclick nur für die Dauer des Klicks mit jquery

Question

Ich versuche Active Element zu einem Element hinzuzufügen, wenn jemand darauf klickt und dann automatisch entfernen Sie es sofort.

Ich habe bereits versucht, mit folgenden Methoden, aber ohne Glück noch -

Methode - 1

setTimeout(function() { 
    $('.classname').on('click', function() { 
     $('.classname').addClass('active'); 
    }, 1000); 
}); 

Methode - 2

$('.classname').on('click', function() { 
    $(".classname").switchClass("active", "no-active", 1000); 
}); 

Answer 1

Sie in dem richtig sind müssen Sie Verwenden Sie setTimeout(), aber die Logik ist ein wenig aus.

Zuerst müssen Sie setTimeout()innerhalb der Click-Handler verwenden. Sie müssen dann removeClass() auf einen Verweis auf das angeklickte Element aufrufen, wenn der Timer abgeschlossen ist. Versuchen Sie folgendes:

$('.classname').on('click', function() { 
 
    var $el = $(this).addClass('active'); 
 
    setTimeout(function() { 
 
    $el.removeClass('active'); 
 
    }, 1000); 
 
});

div { 
 
    transition: color 0.3s, background-color 0.5s; 
 
} 
 
.active { 
 
    color: #FFF; 
 
    background-color: #C00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="classname">foo</div> 
 
<div class="classname">foo</div> 
 
<div class="classname">foo</div> 
 
<div class="classname">foo</div> 
 
<div class="classname">foo</div>

jedoch aus dem Bild geschrieben Sie es sieht aus wie alles, was Sie benötigen ist ein :active Zustand hinzuzufügen. Das an das Element angelegt wird, während die Maustaste auf sie gedrückt gehalten wird:

div:active { 
 
    background-color: #C00; 
 
    color: #FFF; 
 
}

<div>Click me</div>

Answer 2

versuchen dieses

vor setTimeout Funktion aufrufen, fügen Sie die class und nach einigen Sekunden wird es entfernen mit settimeout

$('.classname').click(function() { 
 
    $('.classname').addClass('active'); 
 
    setTimeout(function() { 
 
    $('.classname').removeClass('active'); 
 
    }, 500); 
 
});

.active { 
 
    width: 30px; 
 
    height: 20px; 
 
    background: blue; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="classname"> 
 
    test 
 
</div>

und für switchclass

Sie vermissen jQuery UI höchstwahrscheinlich, wie switchClass Teil von jQuery UI ist, und die jQuery-Bibliothek nicht.

Answer 3

Ich denke, das ist besser, mit nur CSS zu tun: mit :active so wird es so etwas wie diese:

button { 
 
    background-color:red; 
 
} 
 

 
button:active { 
 
    background-color:green; 
 
}

<button type="button"> 
 
Click Here 
 
</button>

oder mit einer kleinen Verzögerung:

button { 
 
    border: 1px solid #bada55; 
 
    background-color:red; 
 
    transition: .50s all; 
 
    transition-delay: 1s; 
 
} 
 

 
button:active { 
 
    background-color:green; 
 
    transition-delay: 0s; 
 
}

<button type="button"> 
 
Click Here 
 
</button>

Answer 4

$(function() { 
 
    setInterval(function() { 
 
     $('.classname').addClass('active'); 
 
    }, 1000); 
 
    setInterval(function() { 
 
     $('.classname').removeClass('active'); 
 
    }, 2000); 
 
});

.active{ 
 
color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
<div class="classname">Hello</div>

versuchen dieses