这个问题是that的后续.在页面初始化时,按钮没有被“桥接”,当用户点击里面有图标的蓝色按钮时就变成了桥接。
条件:
如果 2 个按钮被桥接(点击蓝色按钮时的 Action ),另一个必须被桥接(用周围的数字连接)[这有效]之后,如果用户点击任何一个按钮,这三个按钮必须与周围的数字分开
我有这个 HTML 代码(使用 Bootstrap 3 ):
<div class="col-sm-12 interfacesBridge">
<h3 class="text-info">Interfaces</h3>
<div class="col-sm-4">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-default bRLeft" disabled="disabled" style="margin-right: 15px !important;">3</button>
<button type="button" class="btn btn-info linkInterfaces" data-interfaces="3-4"><i class="fa fa-chain-broken"></i></button>
<button type="button" class="btn btn-default bRRight" disabled="disabled" style="margin-left: 15px !important;">4</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-default bRLeft" disabled="disabled" style="margin-right: 15px !important;">3</button>
<button type="button" class="btn btn-info linkInterfaces" data-interfaces="3-5"><i class="fa fa-chain-broken"></i></button>
<button type="button" class="btn btn-default bRRight" disabled="disabled" style="margin-left: 15px !important;">5</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-default bRLeft" disabled="disabled" style="margin-right: 15px !important;">4</button>
<button type="button" class="btn btn-info linkInterfaces" data-interfaces="4-5"><i class="fa fa-chain-broken"></i></button>
<button type="button" class="btn btn-default bRRight" disabled="disabled" style="margin-left: 15px !important;">5</button>
</div>
</div>
</div>
</div>
还有这个 jQuery 代码:
function setBridged(selector) {
selector.addClass('bridged');
selector.prev().animate({'marginRight': '0', 'marginLeft': '15px'}, 1000);
selector.next().animate({'marginLeft': '0'}, 1000);
selector.find('i').removeClass().addClass('fa fa-link');
}
function unsetBridged(selector) {
selector.removeClass('bridged');
selector.prev().animate({'marginRight': '15px', 'marginLeft': '0'}, 1000);
selector.next().animate({'marginLeft': '15px'}, 1000);
selector.find('i').removeClass().addClass('fa fa-chain-broken');
}
$(document).ready(function () {
$('.linkInterfaces').click(function () {
if ($(this).find('i').hasClass('fa-chain-broken')) {
setBridged($(this));
} else {
unsetBridged($(this));
}
if ($('.interfacesBridge .bridged').length >= 2) {
$('.linkInterfaces:not(.bridged)').trigger('click', function() {
setBridged($(this));
});
}
});
});
我尝试了很多方法来实现目标,但就是这样。
请参阅jsfiddle相关联。
最佳答案
观察条件后,点击事件的触发时机为:
桥接时,如果超过
2
(包括自己),然后桥接所有尚未桥接的。当一些东西未桥接时,如果仍然超过
2
bridged,表示prev状态全部bridged,unbridge all。
因此您可以将逻辑更改为:
$('.linkInterfaces').click(function () {
if ($(this).find('i').hasClass('fa-chain-broken')) {
//targetFunc = setBridged;
setBridged($(this));
if ($('.interfacesBridge .bridged').length >= 2) {
$('.linkInterfaces:not(.bridged)').trigger('click');
}
} else {
unsetBridged($(this));
if ($('.interfacesBridge .bridged').length >= 2) {
$('.interfacesBridge .bridged').trigger('click');
}
}
});
已更改 jsfiddle .
在这种情况下也可以提取逻辑,但请注意,如果桥接/取消桥接的条件都变得不同(例如:>= 2
桥接,<= 1
取消桥接),比第一个更好分离逻辑。
$('.linkInterfaces').click(function () {
var relatedTargets;
if ($(this).find('i').hasClass('fa-chain-broken')) {
setBridged($(this));
relatedTargets = '.linkInterfaces:not(.bridged)';
} else {
unsetBridged($(this));
relatedTargets = '.linkInterfaces.bridged';
}
// When bridged element is more than 2 when clicked, we need to either link all, or unlink all.
if ($('.interfacesBridge .bridged').length >= 2) {
$(relatedTargets).trigger('click');
}
});
并注意 .trigger的第二个或后面的参数将传递给事件处理程序,但不会触发,因此在您的原始代码中,除非您在事件处理程序中调用它,否则传入的函数不会生效。
关于javascript - 3个按钮之间的交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32478687/