单选按钮激活键的图标应该OutlineIcon或FillledIcon

Question

这里是我的HTML：

<ul id="auction-type-filter"> 
    <li> 
    <label class="btn" data-toggle="iconOnOff" data-icon-on="bb-home" data-icon-off="bb-home-o"> 
     <input type="radio" name="auction-type"> <i class="bbIcon"></i> 
    </label> 
    </li> 
    <li> 
    <label class="btn" data-toggle="iconOnOff" data-icon-on="bb-setting" data-icon-off="bb-setting-o"> 
     <input type="radio" name="auction-type"> <i class="bbIcon"></i> 
    </label> 
    </li> 
</ul> 

1. 一旦加载页面数据图标关=“关闭图标-O”应加到 全部<i class="bbIcon">例如。 <i class="bbIcon bb-setting-o">
2. 一旦单选按钮，单击要使用填充图标添加活动图标<i class="bbIcon bb-setting">

这里是我的jQuery：

var bidderBlockIcon, bbIconOn, bbIconOff; 

function fnButtonOutlineOnOff(el) { 
    bbIconOn = $(el).attr('data-icon-on'); 
    bbIconOff = $(el).attr('data-icon-off'); 
    bidderBlockIcon = $(el).find('.bbIcon'); 
} 

$('[data-toggle="bbIconOnOff"]').each(function() { 
    // Adds outline Icons to all <i class="bbIcon"></i> 
    fnButtonOutlineOnOff(this); 
    bidderBlockIcon.addClass(bbIconOff); 
}).click(function() { 
    fnButtonOutlineOnOff(this); 
    bidderBlockIcon.addClass(bbIconOn); 
}); 

上面的代码只是增加了充满图标<i class="bbIcon bb-setting"></i>而是选择其他单选按钮不会更改为<i class="bbIcon bb-setting-o"></i>

Answer 1

更简单的方法是将函数全部打开关闭，然后在上打开change收音机。在你的HTML

function allOff() { 
 

 
    $('[data-toggle="bbIconOnOff"]').each(function() { 
 

 
    var bbIconOn = $(this).data('icon-on'); 
 
    var bbIconOff = $(this).data('icon-off'); 
 
    $(this).find('.bbIcon').removeClass(bbIconOn).addClass(bbIconOff); 
 

 
    }); 
 

 
} 
 

 
$('[name="auction-type"]').change(function() { 
 

 
    allOff(); 
 
    var bbIconOn = $(this).parent().data('icon-on'); 
 
    $(this).next('.bbIcon').addClass(bbIconOn); 
 

 
}); 
 

 
allOff();

Answer 2

设置默认的图标。

<ul id="auction-type-filter"> 
<li> 
    <label class="btn" data-toggle="iconOnOff" data-icon-on="bb-home" data-icon-off="bb-home-o"> One 
    <input type="radio" name="auction-type"> 
    <i class="bbIcon bb-home-o"></i> 
    </label> 
</li> 
<li> 
    <label class="btn" data-toggle="iconOnOff" data-icon-on="bb-setting" data-icon-off="bb-setting-o"> Two 
    <input type="radio" name="auction-type"> 
    <i class="bbIcon bb-setting-o"></i> 
</label> 
</li> 

$('input[name=auction-type]').change(function() { 
$('input[name=auction-type]').next().attr('class', '').addClass('bbIcon'); 
$(this).next().removeClass($(this).parent().attr("data-icon-off")).addClass($(this).parent().attr("data-icon-on")); 
});