jquery 切换数量,动态改变样式，隐藏展开

Posted 2021-04-08 phpzheng

前几天给大家分享了关于 jquery 的常用语法，碰巧最近写了一个带有 jquery 功能的页面，页面中包含了赋值、隐藏、展开、点击事件等功能，这里给大家拆分说一说。

点击阅读原文查看页面效果

点击阅读原文下载源代码

请务必先查看页面效果，然后在看下面的拆读。

一、点击右侧的 + ，会出现数字框，每点击一次 + ，则数字框的内容会加 1 。

$('.jia').click(function(){
        //获取当前的数字框里的数值
        currNum = parseInt($(this).siblings('.num').text());
        newNum = parseInt(currNum+1);
        $(this).siblings('span').show();
        //对数字框加 1 后，重新赋值
        $(this).siblings('.num').text(newNum);
})

二、点击右侧的 “-” 号，，则数字框的内容会减少 1，当减 1 完成后，如果最新值为 0 ，则隐藏数字框 。

$('.jian').click(function(){
        //获取当前的数字框里的数值
        currNum = parseInt($(this).siblings('.num').text());
        newNum = parseInt(currNum-1);
         //对数字框减 1 后，重新赋值,如果最新值为 0 ，则隐藏数字框 
         if(newNum==0){
            $(this).hide();
            $(this).siblings('.num').hide();
   ‍      }else{
             $(this).siblings('.num').text(newNum);
    }‍
})

三、点击左侧菜单

    1、如果当前点击的左侧菜单下没有二级菜单，那么给当前点击的菜单添加一个 class ，同时将其同级元素的样式改为非选中的 class。

    2、如果当前点击的左侧菜单下有二级菜单，那么给当前点击的菜单添加一个 class ，同时将其同级元素的样式改为非选中的 class，另外，将当前点击菜单的第一个子菜单也添加一个 class 表示当前选中；

        当点击二级菜单时，给当前点击的菜单添加一个 class ，同时将其同级元素的样式改为非选中的 class。

//这里是点击一级菜单时的事件
$('.litem').click(function(){
    $(this).siblings().children('.pritem').removeClass('active');
    $(this).siblings().children('.cleftitem').hide();
    $(this).children().show();
    $(this).children('.pritem').addClass('active');
});
//这里是点击二级菜单时的事件
$('.cleftitem').click(function(){
    $(this).addClass('active');
    $(this).siblings('.cleftitem').removeClass('active');
});

这个例子中，用到了很多常用到知识点，如果看懂上例并且可以自己写出来，那么我想，jquery 你算是入门了。