这种工作占60%的时间.但有时我需要再次点击一个按钮.当然,这不会在真实的网络世界中飞翔.我正在使用一个改进的bootstrap-min,这可能是禁止另一种风格的按钮.想象一下它们与“data-color = primary”相同. “data-color = icomold”是唯一的补充.
以下是您排除故障的重要部分:
按钮……
<tr>
<td colspan="5">
<span class="button-checkBox">
<button type="button" class="btn" data-color="icomold">Injection Mold</button>
<input type="checkBox" class="hidden"/>
</span>
<span class="button-checkBox">
<button type="button" class="btn" data-color="icomold">Export Mold</button>
<input type="checkBox" class="hidden"/>
</span>
<span class="button-checkBox">
<button type="button" class="btn" data-color="icomold">CNC Plastic</button>
<input type="checkBox" class="hidden"/>
</span>
<span class="button-checkBox">
<button type="button" class="btn" data-color="icomold">CNC Metal</button>
<input type="checkBox" class="hidden"/>
</span>
<span class="button-checkBox">
<button type="button" class="btn" data-color="icomold">Urethane Casting</button>
<input type="checkBox" class="hidden" />
</span>
</td>
</tr>
然后这是脚本片:
$(function() {
$('.button-checkBox').each(function() {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkBox = $widget.find('input:checkBox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function() {
$checkBox.prop('checked', !$checkBox.is(':checked'));
$checkBox.triggerHandler('change');
updatedisplay();
});
$checkBox.on('change', function() {
updatedisplay();
});
// Actions
function updatedisplay() {
var isChecked = $checkBox.is(':checked');
// Update the button's color
if (isChecked) {
//We've activated one
//Now we need to deactivate the rest of the buttons
//var elm = document.createElement("div");
var y = document.getElementsByClassName('btn btn-icomold active');
var aNode = y[0];
if (typeof (aNode) != "undefined" && $button.context.innerText != aNode.innerText)
{
aNode.className = "btn btn-default";
var state = aNode.childNodes[0]
state.className = "state-icon glyphicon glyphicon-unchecked";
}
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
}
// Initialization
function init() {
updatedisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
解决方法:
这是修复.
function updatedisplay(from) {
var isChecked = $checkBox.is(':checked');
isChecked = from;
所以对于我的目的,我不在乎原始价值是什么.
在Init和一个事件我发送它需要改变的东西.
// Initialization
function init() {
updatedisplay(false);
初始化时为假…而“点击”事件为真.为了我的目的:没有理由有一个unlick事件.
// Event Handlers
$button.on('click', function() {
$checkBox.prop('checked', !$checkBox.is(':checked'));
$checkBox.triggerHandler('change');
updatedisplay(true);
});
感谢Dossy强调Updatedisplay发生了两次.
这一部分需要注释掉:
//$checkBox.on('change', function() {
// updatedisplay();
// });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。