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

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我想用id =“BAg”打开div并 单击 B 和 Cli 我想用 id = "BCli" 打开 div 并 单击 Q 和 Ag 我想用 id = "QAg" 打开 div 并 单击 Q 和 Cli 我想用 id = "QCli"

打开 div

这是我尝试过的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")
});
});
});

我们可以帮我解决这个问题吗

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>