как открыть 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 я хочу открыть div с помощью id = "BAg" и при нажатии B и Cli я хочу открыть div с id = "BCli" и при нажатии Q и Ag я хочу открыть div с помощью id = "QAg", а при нажатии Q и Cli я хочу открыть div с id = "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")
});
});
});

, поэтому мы можем помочь мне с этим

Answer 1

Вы можете использовать переменную для добавления идентификаторов из нажатых элементов, как показано ниже:

$(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>