Communication among 3 buttons

Question

Communication among 3 buttons

This inquiry is a continuation of that discussion. Initially, the buttons on the page are not "linked" but become so when the user clicks on the blue button with an icon inside.

Here are the conditions:

~~If two buttons are linked (action upon clicking the blue button), then the others should also link together (connecting with the numbers around)~~ [this functionality is working]
Afterwards, if the user clicks on any button, all three buttons should detach from the connected numbers

The following HTML code is being used (with Bootstrap 3):

<div class="col-sm-12 interfacesBridge">
    <h3 class="text-info">Interfaces</h3>

    <!-- Buttons Layout -->
</div>

In addition to the HTML, here is the jQuery code that complements it:

// JQuery Logic
(function($) {
   // Javascript Code Here....
})(jQuery);

I have made numerous attempts to achieve the desired result, but have hit a roadblock. Please refer to the accompanying jsfiddle demonstration.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Upon examination of the situation, the timing at which the click event is triggered is as follows:

If something is bridged and there are more than 2 (including itself), then bridge all unbridged items.
If something is unbridged and there are still more than 2 items bridged (indicating that all were previously bridged), unbridge all items.

Therefore, the logic can be modified to:

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

Modified jsfiddle.

In this scenario, it is also possible to extract the logic out, but keep in mind that if the conditions for bridging/unbridging change (e.g: from >= 2 to bridge to <= 1 to unbridge), separating the logic may be a better approach.

$('.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 there are more than 2 bridged elements upon clicking, we need to either link all or unlink all.
    if ($('.interfacesBridge .bridged').length >= 2) {
        $(relatedTargets).trigger('click');
    }
});

Additionally, note that the .trigger's second or later parameters will be passed to the event handler but will not trigger unless explicitly called within the event handler in your original code.

Answer 2

Upon examination of the situation, the timing at which the click event is triggered is as follows:

If something is bridged and there are more than 2 (including itself), then bridge all unbridged items.
If something is unbridged and there are still more than 2 items bridged (indicating that all were previously bridged), unbridge all items.

Therefore, the logic can be modified to:

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

Modified jsfiddle.

In this scenario, it is also possible to extract the logic out, but keep in mind that if the conditions for bridging/unbridging change (e.g: from >= 2 to bridge to <= 1 to unbridge), separating the logic may be a better approach.

$('.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 there are more than 2 bridged elements upon clicking, we need to either link all or unlink all.
    if ($('.interfacesBridge .bridged').length >= 2) {
        $(relatedTargets).trigger('click');
    }
});

Additionally, note that the .trigger's second or later parameters will be passed to the event handler but will not trigger unless explicitly called within the event handler in your original code.

Communication among 3 buttons

Answer №1

Similar questions

How to automatically redirect to new Django URL after Ajax function successfully runs?

What is the process for changing or finding the default icon for the Authentication Login in DNN?

What purpose does the <noscript> tag serve in React?

Troubleshooting: Issues with Mod_rewrite affecting CSS, JS, and Image functionality

Create a way to allow users to download html2canvas with a customized filename

Using jQuery to remove the last two characters from a specified class

Controller fails to initialize when utilizing $location.path or $state.go

What is the correct way to format text as superscript?

Tips for setting the background image of the body once the image has finished loading

Angular processes the expression as though it were part of the HTML

Null reference exception in Typescript + NextJS

Error: [$injector:unpr] Oh no! The AuthServiceProvider Angular Service seems to be MIA

Creating dynamic URL routes for a static website using Vue

There is an issue with the functionality of OrbitControls and dat.gui text

There is only one source that plays for the array number - no additional sources are involved

Implementing a Django application feature that enables Ajax auto-complete functionality after the user inputs at least 2 characters with a

What is the best way to use jQuery to wrap two elements while maintaining the integrity of their parent

Incorporating the latest version of SMINT into your Shopify store

updating deeply nested structures in immutable JS

How about sending back the response instead of not returning it, in Node.js