У меня есть два div (.basic1 и .basic2). Я хочу, чтобы .basic1 исчезал при щелчке и .basic2, чтобы исчезнуть, в котором я прекрасно работаю. Единственная проблема заключается в том, что после того, как .basic2 затухает, если пользователь продолжает нажимать ссылку (.navbar1), он будет исчезать в этом div снова и снова. Я знаю, что мне нужно использовать функцию .bind(), но я не могу понять, где в моем коде ее поставить. Спасибо!
$(document).ready(function() {
$('.navbar1').click(function(e){
e.preventDefault();
$('.basic2').hide().load('.basic2', function() {
$(this).delay(600).fadeIn(1000);
$('.basic1').fadeOut(1000);
});
});
});
Используйте .one():
$('.navbar1').one('click', function(e) {
Отключает событие click после его запуска.
Если вы не хотите, чтобы элемент был дважды щелкнул, что-то вроде этого должно работать:
$(document).on('click', '.navbar1:not(.clicked)', function() {
// ...
});
Чтобы сделать .navbar1 unclickable, просто запустите $('.navbar1').addClass('clicked'). Чтобы сделать его интерактивным, сделайте обратное.
Обратитесь к jQuery one() для одноразовых обработчиков событий. т.е.
$(document).ready(function() {
$('.navbar1').one('click', function(e){
e.preventDefault();
$('.basic2').hide().load('.basic2', function() {
$(this).delay(600).fadeIn(1000);
$('.basic1').fadeOut(1000);
});
});
});
jQuery предоставляет метод . one() для этого.
$(document).ready(function() {
$('.navbar1').one('click', function(e){
e.preventDefault();
$('.basic2').hide()
.load('.basic2', function() {
$(this).delay(600).fadeIn(1000);
$('.basic1').fadeOut(1000);
});
});
});
const navbar = document.getElementsByClassName("navbar1")[0];
navbar.addEventListener("click", function() {
// Add one-time callback
}, {once : true});