javascript - 3个按钮之间的交互

标签 javascript jquery html css twitter-bootstrap

这个问题是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相关联。

最佳答案

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

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

关于javascript - 3个按钮之间的交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32478687/

相关文章:

javascript - 同时键盘输入(对 Angular 线游戏移动)

JQuery如何查找并删除li元素

javascript - 如何使用 jquery 正确创建文本字段

html - 为什么我的列表项在列中中断?

jquery - 使用 jQuery 将文本附加到 p

使用固定宽度的容器时,HTML/CSS(Twitter Bootstrap)页脚无法正确显示?

javascript - angularjs中如何匹配大小写字母?

javascript - 如何在 asp 中的剑道 UI 网格字段中编写链接按钮的单击函数

javascript - 如何在Highchart中设置Precision-ToolTip

javascript - 使用javascript向上、下、左、右移动框