javascript - jq字符串操作？

问题描述

问 题

  //html结构
  <em class="icon icon-eye"></em>
  <em class="icon icon-star"></em>
  //类似class一堆
  <em class="icon icon-btn"></em>

  $('.icon-star').on('click', function() {
        //点一次点击 末尾追加-active<em class="icon icon-class名称-active"></em>
        //点二次点击还原 <em class="icon icon-class名称"></em>
   });

//自己摸索的 感觉不完善

  var iconOff = 1;
    $('.icon-star').on('click', function() {
        if (iconOff == 1) {
            
            var thisClass = $(this).attr('class');
            //默认class
            norClass = thisClass;
            $(this).removeClass(thisClass);
            $(this).addClass(thisClass + '-active');
            //获取新class
            var newClass = $(this).attr('class');
            iconOff = 0;
        } else {
            $(this).removeClass(newClass);
            $(this).addClass(norClass);
            iconOff = 1;
        }
    });

解决方案

听你的描述应该是点击的时候修改className, 如果有active就去掉，没有就加上

$('.icon-star').on('click', function() {
    var className = $(this).attr('class'),
        // 需要处理的className
        dealClassName = className.split(' ').filter(function(v) {
            if(v.indexOf('icon-') > - 1) return v;
        }).toString(),
        // 新的className
        newClassName = dealClassName.indexOf('-active') > -1? dealClassName.replace('-active', '') : dealClassName + '-active';
        
    $(this).attr('class', newClassName );
});

这篇关于javascript - jq字符串操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！