3个按钮之间的交互

Question

这个问题是下面那个.在页面初始化时,按钮不是"桥接"的,当用户点击带有图标的蓝色按钮时,按钮就会变为"桥接".

条件 :

1. 如果桥接了2个按钮(单击蓝色按钮时动作),则另一个按钮必须桥接(与周围的数字连接) [ 这个工作 ]

2. 之后,如果用户点击任何按钮,则3个按钮必须与周围的数字分开

我有这个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

观察条件后,click事件的触发时间为:

1. 当某些东西被桥接时,如果有超过2(包括自我),那么桥接每个尚未桥接的东西.

2. 当某些东西没有被拆开时,如果还有更多的2桥接,这意味着流行状态全部被桥接,取消所有桥梁.

所以你可以改变逻辑:

$('.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的第二个或更晚的参数将被传递给事件处理程序,但不会触发,因此在原始代码中,传入函数的函数将不会生效,除非您在事件处理程序中调用它.