Buttons And Drop-Down Using Same ShowHide jQuery With Conflicting Results - How To Mediate Issue - Stack Overflow

admin管理员组

文章数量:1391929

What you are seeing is a jQuery version of a show-hide toggle created by user Kurt in response to a question from user1575698 on toggling multiple IDs. While it was not the original poster's preferred answer, I saw Kurt's suggestion as pretty useful and made some adaptions to it. Each adaption has been separated by a tab for clarity, and I will get to why this is necessary in a moment.

The "Buttons" tab makes use of the BUTTON tag, whereby clicking any button shows any DIVs with the buttonx class and ID, where x is the number, and hides the rest. All BUTTON tags have a hashtag href, a "show" class, and make use of the data-toggle parameter.

In the "Dropdown" tab, the SELECT and OPTION tags are utilized instead. Click on the dropdown to unveil a list of options, and like in the Buttons adaption, only the DIVs that match the optionx ID are shown and hides the rest. All OPTION tags have a "show" class and a data-toggle parameter.

This is the jQuery function in question:

$(function($){
    $(".show").click(function() {
        $(".toggle").hide();
        $("*#"+$(this).data("toggle")).show(); 
    });
    $("BUTTON").first().click();
});

You may have already noticed a glitch while you were experimenting with the button and dropdown actions. Both events are making use of the same jQuery function which is causing a conflict between the two of them. If you are in the Dropdown tab and you select any option from the dropdown menu to toggle the option DIVs, when you switch back to the Button tab to do the same, the DIVs in the button tab will have already disappeared. This can be fixed by simply clicking any button, but as a consequence the option DIVs will have disappeared.

The original intent is for the Button and Dropdown events to work independently from each other while making use of the same jQuery code. Anything that is done in the Button tab stays within the Button tab, likewise for the Dropdown tab.

One thing I tried to do was give the function a selector to restrict its duties to just that tab. Doing "$(".Button").(function($){...})" sprouted an error, so I tried "defining" the action by adding an 'on' or 'click' in front of the function ($(".Button").on(function($){...}); that also failed as it broke the function and showed all DIVs anyway. My last resort may be to create two distinctively different functions to prevent a wrestling match between events.

How do I revise the code so that both the button and dropdown events work independent from each other while still making use of the same jQuery code if possible?

https://codepen.io/wammygiveaway/pen/VYwrRwG

What you are seeing is a jQuery version of a show-hide toggle created by user Kurt in response to a question from user1575698 on toggling multiple IDs. While it was not the original poster's preferred answer, I saw Kurt's suggestion as pretty useful and made some adaptions to it. Each adaption has been separated by a tab for clarity, and I will get to why this is necessary in a moment.

The "Buttons" tab makes use of the BUTTON tag, whereby clicking any button shows any DIVs with the buttonx class and ID, where x is the number, and hides the rest. All BUTTON tags have a hashtag href, a "show" class, and make use of the data-toggle parameter.

In the "Dropdown" tab, the SELECT and OPTION tags are utilized instead. Click on the dropdown to unveil a list of options, and like in the Buttons adaption, only the DIVs that match the optionx ID are shown and hides the rest. All OPTION tags have a "show" class and a data-toggle parameter.

This is the jQuery function in question:

$(function($){
    $(".show").click(function() {
        $(".toggle").hide();
        $("*#"+$(this).data("toggle")).show(); 
    });
    $("BUTTON").first().click();
});

You may have already noticed a glitch while you were experimenting with the button and dropdown actions. Both events are making use of the same jQuery function which is causing a conflict between the two of them. If you are in the Dropdown tab and you select any option from the dropdown menu to toggle the option DIVs, when you switch back to the Button tab to do the same, the DIVs in the button tab will have already disappeared. This can be fixed by simply clicking any button, but as a consequence the option DIVs will have disappeared.

The original intent is for the Button and Dropdown events to work independently from each other while making use of the same jQuery code. Anything that is done in the Button tab stays within the Button tab, likewise for the Dropdown tab.

One thing I tried to do was give the function a selector to restrict its duties to just that tab. Doing "$(".Button").(function($){...})" sprouted an error, so I tried "defining" the action by adding an 'on' or 'click' in front of the function ($(".Button").on(function($){...}); that also failed as it broke the function and showed all DIVs anyway. My last resort may be to create two distinctively different functions to prevent a wrestling match between events.

How do I revise the code so that both the button and dropdown events work independent from each other while still making use of the same jQuery code if possible?

• jquery
• button
• toggle
• html-select
• show-hide

Share Improve this question Follow asked Mar 14 at 6:36 WammyWammy 631111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Not trivial

Several issues with your code - duplicate IDs for example

Here is a vanilla JS version that does what you want. Perhaps it is not as short as you had hoped

I delegate from the closest container - see comments

I hide the toggle divs belonging to the parent container

const toggleView = (e) => {
  const tgt = e.target;
  if (!tgt.matches('.show')) return;

  const isSelect = tgt.matches('select');
  let toggleClass = isSelect ?
    tgt.options[tgt.selectedIndex]?.dataset?.toggle : // note the Optional chaining ?.
    tgt.dataset?.toggle;

  if (toggleClass) toggleClass = '.' + toggleClass; // add the dot - I use plus because the highlighter here hated the template literal (backtick)

  const container = tgt.closest('div');
  if (container) {
    container.querySelectorAll('.toggle').forEach(div => {
      div.hidden = !div.matches(toggleClass); // will hide all on first option in case you remove disabled
    });
  }
};
window.addEventListener('load', () => {
  document.getElementById('button').addEventListener('click', toggleView); // button container
  // document.addEventListener('click', toggleView); // if more than one set of buttons
  document.getElementById('dropdown').addEventListener('change', toggleView); // select container
  // document.addEventListener('change', toggleView); // if more than one set of selects

  setupTabs();
  document.querySelectorAll('.toggle').forEach(div => div.hidden = true); // hide initially
  const button = document.querySelector('button'); // first button
  if (button) button.dispatchEvent(new Event('click', { // click it like this to pass the event
    bubbles: true
  })); // note the bubbles to make document catch it
});

ul.tabs {
  border: 1px solid black;
  width: 15%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px;
  text-align: center;
  list-style-type: none;
}

li.tab {
  width: calc(100%/2);
  padding: 10px;
  cursor: pointer;
  color: darkgrey;
  transition: all 0.3s ease-in-out;
}

li.tab:hover {
  background-color: silver;
  color: grey;
}

li.tab.active {
  background-color: skyblue;
  color: slateblue;
}

li.tab.active:hover {
  background: slateblue;
  color: white;
}

[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
  display: block;
}

button {
  width: 50px;
}

div.grid {
  width: 15%;
  display: grid;
  grid-auto-flow: rows;
  grid-template-columns: calc(100%/2) auto;
}

div.grid div {
  border: 1px solid black;
}

<ul class="tabs">
  <li data-tab-target="#button" class="active tab">button</li>
  <li data-tab-target="#dropdown" class="tab">drop-down</li>
</ul>

<div id="button" class="active" data-tab-content>

  <button href="#" class="show" data-toggle="button1">b1</button>
  <button href="#" class="show" data-toggle="button2">b2</button>
  <button href="#" class="show" data-toggle="button3">b3</button>

  <div class="button1 toggle button1">button 1 info a</div>
  <div class="button1 toggle button1">button 1 info b</div>

  <div class="button2 toggle button2">button 2 info</div>

  <div class="button3 toggle" id="button3">button 3 info</div>

</div>

<div id="dropdown" class="" data-tab-content>

  <select class="show">
    <option selected="" disabled="">select option</option>
    <option data-toggle="option1">o1</option>
    <option data-toggle="option2">o2</option>
    <option data-toggle="option3">o3</option>
  </select>

  <div class="grid">
    <div class="toggle option1">option 1a</div>
    <div class="toggle option1">o1-a</div>
    <div class="toggle option1">option 1b</div>
    <div class="toggle option1">o1-b</div>
    <div class="toggle option2">option 2</div>
    <div class="toggle option2">o2</div>
    <div class="toggle option3">option 3a</div>
    <div class="toggle option3">o3-a</div>
    <div class="toggle option3">option 3b</div>
    <div class="toggle option3">o3-b</div>
  </div>

</div>

<script>
  // I leave it here since it did not change
  const setupTabs = () => {
    // Javascript Tabs by WebDevSimplified
    // codepen.io/WebDevSimplified/pen/ewapgK
    const tabs = document.querySelectorAll('[data-tab-target]');
    const tabContents = document.querySelectorAll('[data-tab-content]');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const target = document.querySelector(tab.dataset.tabTarget);
        tabContents.forEach(tabContent => {
          tabContent.classList.remove('active');
        });
        tabs.forEach(tab => {
          tab.classList.remove('active');
        });
        tab.classList.add('active');
        target.classList.add('active');
      });
    });
  }
</script>

本文标签： Buttons And DropDown Using Same ShowHide jQuery With Conflicting ResultsHow To Mediate IssueStack Overflow