javascript - 如何在jquery中打开一个div单击两个按钮依次单击

Question

我有一个关于按钮点击的问题我有四个按钮点击两个按钮背靠背我想打开 div 所以基于不同的点击组合我想打开不同的 div

这是我的html

    <button id="B">B</button>
    <button id="Q">Q</button>
    <button id="Ag">Ag</button>
    <button id="Cli">Cli</button>


<div id="BAg"></div>
<div id="BCli"></div>
<div id="QAg"></div>
<div id="QCli"></div>

所以点击 ，B我Ag想打开 divid = "BAg"和点击 ，B我Cli想打开 div ，点击id = "BCli"，Q我Ag想打开 div ，我想打开 divid = "QAg"QCliid = "QCli"

这是我尝试过的jquery

$(document).ready(function () {
$("#B").click(function(){
$("#Ag").click(function(){
alert("B Ag")
});
});

$("#B").click(function(){
$("#Cli").click(function(){
alert("B Cli")
});
});

$("#Q").click(function(){
$("#Ag").click(function(){
alert("Q Ag")
});
});

$("#Q").click(function(){
$("#Cli").click(function(){
alert("Q Cli")
});
});
});

所以我们能帮我解决这个问题吗

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用变量从单击的元素中附加 id，如下所示：

$(function() {
  let creatingString = false, str;

  $("#B a, #Q a").click(function() {
    creatingString = true; str = "";
    str += $(this).parent().prop("id")
  })

  $("#Ag a, #Cli a").click(function() {
    if (!creatingString) return
    else {
      str += $(this).parent().prop("id")
      console.log("Selected ID:", str)
      
      $(".selected").removeClass("selected")
      $("#" + str).addClass("selected")
      
      creatingString = false
    }
  })
})

div.selected {
  background: yellow;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myTabs" class="nav nav-pills nav-justified" role="tablist" data-tabs="tabs">
  <li id="B"><a href="#">B</a></li>
  <li id="Q"><a href="#">Q</a></li>
  <li id="Ag"><a href="#">Ag</a></li>
  <li id="Cli"><a href="#">Cli</a></li>
</ul>

<div id="BAg">BAg</div>
<div id="BCli">BCli</div>
<div id="QAg">QAg</div>
<div id="QCli">QCli</div>