jQuery——立可得项目心得

目录

前言

1、成品展示

2、制作分享

2.1、问题分享

2.2、解决方法

总结

---

前言

        小编又来做分享了，小编给你们带来了一个科技感十足的好东西！绝对是看上都是直呼牛B的好东西，下面我们废话不多说，来吧！展示！！！！

1、成品展示

立可得

2、制作分享

        小编我看到这个项目的第一眼就觉得这是一个科技感十足的项目，在制作的过程中还是遇到过很多的问题，但是都被小编一一解决了！在做最后一个模块的时候才是小编认为伟大的一个问题。

2.1、问题分享

        在编写最后一个模块的js效果中小编发现他的定时器里面的事件会和前面给小li添加的事件进行冲突。这也是小编很不解的问题。原来现编的方法是这样的：

$(".province .sup").on("mouseenter", "li", function() {
        index = $(this).index();
        
$(this).addClass("active").siblings().removeClass("active");
        //开始遍历当前对应索引号的品牌的数组
        var subhtml = "";
        $.each(hotData[$(this).index()].brands, function(index, item) {
            subhtml += `<li>
            <span>${item.name}</span>
            <span>${item.num} <s class=${item.flag ? "icon-arrow-up2":"icon-arrow-down2"}></s></span>
        </li>`
        });
        //渲染各省热销 sub 模块
        $(".sub").html(subhtml);
    });  
//4.把第一个小li处于选中状态
    var lis = $(".province .sup li");
    lis.eq(0).mouseenter();
    //5.开启定时器
    var index = 0;
    var timer = setInterval(function() {
        index++;
        if (index >= 5) index = 0;
        lis.eq(index).mouseenter();
        
    }, 2000);
    $(".province .sup").hover(function() {
        clearInterval(timer);
    }, function() {
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            if (index >= 5) index = 0;
            lis.eq(index).mouseenter();
        }, 2000);
    })

         但是在这个方法下，定时器里面的鼠标放上去的事件会与前面的触摸事件进行冲突，但是他不会进行报错，但是执行的效果却是只有鼠标触摸上去立马离开就会立马清除定时器。小编经过多次的努力最后还是解决了这个问题。

2.2、解决方法

        其实解决办法就是在定时器里我们不使用mouseenter这个事件，把上面小li需要做的事件在定时器里面再做一次。小编先把小li需要做的事件封装成一个函数。然后在定时器里面调用这个函数就可以解决这个定时器事件冲突的问题。这样定时器里面就不会再存在mouseenter事件了。

$(".province .sup").on("mouseenter", "li", function() {
        index = $(this).index();
        render($(this));
    });
    // 封装一个函数用来包括小li高亮显示和渲染数据

    function render(that) {
        that.addClass("active").siblings().removeClass("active");
        //开始遍历当前对应索引号的品牌的数组
        var subhtml = "";
        $.each(hotData[that.index()].brands, function(index, item) {
            subhtml += `<li>
            <span>${item.name}</span>
            <span>${item.num} <s class=${item.flag ? "icon-arrow-up2":"icon-arrow-down2"}></s></span>
        </li>`
        });
        //渲染各省热销 sub 模块
        $(".sub").html(subhtml);
    }
    //4.把第一个小li处于选中状态
    var lis = $(".province .sup li");
    lis.eq(0).mouseenter();
    //5.开启定时器
    var index = 0;
    var timer = setInterval(function() {
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
    }, 2000);
    $(".province .sup").hover(function() {
        clearInterval(timer);
    }, function() {
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            if (index >= 5) index = 0;
            //lis.eq(index).mouseenter();
            render(lis.eq(index));
        }, 2000);
    })

---

总结

        好了，愉快的分享就到这里了！希望大家一起进步！