Javascript 3个按钮之间的交互

这个问题如下。在页面初始化时，按钮不是“桥接”的，当用户单击带有图标的蓝色按钮时，按钮变为“桥接”

条件：

如果两个按钮被桥接（单击蓝色按钮时的操作），则另一个按钮必须被桥接（用周围的数字连接）[此操作有效]

之后，如果用户单击任何按钮，3个按钮必须与周围的数字分开

我有以下HTML代码（使用）：

我尝试了很多方法来达到目的，但是我被卡住了

---

请参阅相关的。

观察条件后，单击事件的触发时间为：

当某个东西被桥接时，如果有超过2个（包括self），那么桥接每一个还没有桥接的东西

当某些内容未桥接时，如果仍有超过

2

bridged，这意味着上一个状态已全部桥接，则全部未桥接

因此，您可以将逻辑更改为：

$('.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');
        }
    }
});

改变了

---

在这种情况下，也可以提取逻辑，但请注意桥接/未桥接的条件是否都不同（例如：

=2

要桥接，

你的意思是什么？不管怎样，在第一个参数之后的参数是
extraparams
，你传递的函数在那里没有效果。只是一个问题，如果你不在这里使用它，为什么要设置一个名为
targetFunc
的变量？我只是在解决问题时尝试重构它：P，忘了吧要删除它，现在就删除！很抱歉我造成的混乱。谢谢你的精彩解释，我在那里学到了一些东西！
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));
            });
        }
    });

});

$('.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');
        }
    }
});

$('.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');
    }
});