按钮和下拉下拉使用相同的表演/隐藏jQuery，结果矛盾 - 如何调解问题

Question

https：//codepen.io/wammygiveaway/pen/vywrrwg

您看到的是用户库尔特创建的节目隐藏切换的jQuery版本，以回应thodoggling多个IDS上的用户1575698的问题。虽然这不是原始海报的首选答案，但我认为Kurt的建议非常有用，并对其进行了一些改编。为了清楚起见，每个适应都通过一个选项卡进行了分开，我将了解为什么这是必要的。 “按钮”选项卡使用按钮标签，从而单击任何按钮显示与按钮类别和ID的任何div，其中x是数字，然后隐藏其余的。所有按钮标签都有一个主题标签HREF，一个“ show”类，并使用data-toggle参数。

在“下拉”选项卡中，选择和选项标签被使用。单击下拉列表以揭示选项列表，就像在按钮适应中一样，仅显示与OptionX ID匹配的DIVS并隐藏其余的。所有选项标签都有一个“ show”类和一个数据toggle参数。

这是所讨论的jQuery函数：

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

您可能已经注意到您在尝试按钮和下拉操作时已经注意到了一个小故障。这两个事件都在利用相同的jQuery函数，从而导致两个事件之间的冲突。如果您在“下拉”选项卡中，并且从“下拉菜单”切换选项divs中选择任何选项，则当您切换到按钮选项卡进行相同操作时，“按钮”选项卡中的DIVS将已经消失。可以通过简单单击任何按钮来解决这一点，但因此选项DIV将消失。

最初的意图是用于按钮和下拉事件，可以在使用相同的jQuery代码的同时彼此独立工作。按钮选项卡中的任何操作中所做的任何事情都停留在“按钮”选项卡中，同样对于下拉列表。 我试图做的一件事情是将功能限制为仅将其职责限制在该选项卡中的选择器。执行“ $（”。按钮”）。（函数（$）{...}）”发出了一个错误，因此我尝试通过在功能前添加'on'或'on'或'单击'来定义“”操作。函数（$（“。button”）。on（function（$）{... {...}）;在函数中也差别差异，并且均可互动。

如何修改代码，以便按钮和下拉事件彼此独立，同时仍在使用相同的jQuery代码？

无琐事

代码的几个角度问题 - 重复ID例如

here是一种瓦尼拉JS版本，可实现您想要的。也许它并不像您希望的那么短

Answer 1

window.addEventListener('load', () => {
  document.addEventListener('click', (e) => {
    const tgt = e.target;
    if (!tgt.matches('.show')) return;

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

    if (toggleClass) {
      toggleClass = '.'+toggleClass; // add the dot - I use plus because the highlighter here hated the template literal
      const container = tgt.closest('div');
      if (container) {
        container.querySelectorAll('.toggle').forEach(div => {
          div.hidden = !div.matches(toggleClass);
        });
      }
    }
  });
  
  setupTabs();  
  document.querySelectorAll('.toggle').forEach(div => {
    div.hidden = true;
  });

  const button = document.querySelector('button');
  if (button) {
    button.dispatchEvent(new Event('click', {
      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>
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>