时间戳

首页 > 解决方案 > 如何通过单击元素取消功能的触发？

jquery - 如何通过单击元素取消功能的触发？

问题描述

我创建了一个在特定时间自动触发的滑块。我设置当我单击滑块后面的元素时，它将出现在前面并且数据位置 = 1。问题是当我单击已经在前面的元素时，它会启动我的功能并尝试添加它在前面，即使它已经存在，并且会发生这种效果：https ://vimeo.com/378484003 。如何取消对已经在前面的项目的点击？

jQuery(document).ready(function () {

// get active
var get_active = $("#dp-slider .dp_item:first-child").data("class");
$("#dp-dots li").removeClass("active");
$("#dp-dots li[data-class=" + get_active + "]").addClass("active");


var num = 1;

$("#dp-dots li, #dp-slider .dp_item").click(function () {
    var get_slide = $(this).attr('data-class');
    num = get_slide;
    generalClick(get_slide);
});

function generalClick(number) {
    $("#dp-dots li").removeClass("active");
    $("#dp-dots li:nth-child(" + number + ")").addClass("active");
    $("#dp-slider .dp_item[data-class=" + number + "]").hide().prependTo("#dp-slider").fadeIn();
    $("#dp-slider .dp_item").removeClass('test');
    $("#dp-slider .dp_item[data-class=" + number + "]").addClass("test");
    $.each($('#slider .dp_item'), function (index, dp_item) {
        $(dp_item).attr('data-position', index + 1);
    });

    $(".text .div").removeClass('is-active');
    $(".div-" + number).addClass('is-active');

    $(".dp_item .dp-content").removeClass('opacity');
    $(".dp_item .dp-content img").removeClass('fade-up');

    $(".item-" + number + " .dp-content").addClass('opacity');
    $(".item-" + number + " .dp-content img").addClass('fade-up');
}

var myInterval = setInterval(myTimer, 5000);

function myTimer() {
    num++;
    if (num > $("#dp-dots li").length) {
        num = 1;
    }
    generalClick(num);
}

$("#home .div, #home .dp_item, #dp-dots").on("mouseenter", function () {
    clearInterval(myInterval);
}).on("mouseleave", function () {
    myInterval = setInterval(myTimer, 5000);
}); 
   });

标签： jquery

解决方案

您可以获取单击的元素并检查它是否具有 .active 类。而且只是有条件的。

$("#dp-dots li, #dp-slider .dp_item").click(function () {
   var class = $(this).attr("class");
   if(!class.includes('active')){
   var get_slide = $(this).attr('data-class');
   num = get_slide;
   generalClick(get_slide);
   }
    });

推荐阅读