javascript - 3个按钮之间的交互

Question

这个问题是that的后续.在页面初始化时，按钮没有被“桥接”，当用户点击里面有图标的蓝色按钮时就变成了桥接。

条件:

1. 如果 2 个按钮被桥接(点击蓝色按钮时的 Action )，另一个必须被桥接(用周围的数字连接) [这有效]

2. 之后，如果用户点击任何一个按钮，这三个按钮必须与周围的数字分开

我有这个 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相关联。

Answer 1

观察条件后，点击事件的触发时机为:

1. 桥接时，如果超过2 (包括自己)，然后桥接所有尚未桥接的。

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的第二个或后面的参数将传递给事件处理程序，但不会触发，因此在您的原始代码中，除非您在事件处理程序中调用它，否则传入的函数不会生效。