如何使按钮检查是否单击了其他按钮

Posted 2023-02-06

我想在单击（connect）按钮时检查（klein_auto_1）按钮是否单击，并且（klein_anhaenger_4）单击，然后提醒其他按钮也一样我已经尝试过，但总是收到相同的警报示例（当我单击“连接按钮”时，检查是否单击了klein_auto_2按钮和klein_anhaenger_3，然后提醒a2 + a3，但我对所有按钮始终收到相同的提醒]

对不起我的英语不好对不起

$(function() 
  $("#klein_auto_1").on("click", function() 
    $("#gross_auto").attr("id", "gross_auto_a1");
  );

  $("#klein_auto_2").click(function() 
    $("#gross_auto").attr("id", "gross_auto_a2");
  );

  $("#klein_auto_3").click(function() 
    $("#gross_auto").attr("id", "gross_auto_a3");
  );

  $("#klein_auto_4").click(function() 
    $("#gross_auto").attr("id", "gross_auto_a4");
  );

  $("#gross_auto").click(function() 
    $("#gross_auto_a1").attr("id", "gross_auto");
    $("#gross_auto_a2").attr("id", "gross_auto");
    $("#gross_auto_a3").attr("id", "gross_auto");
    $("#gross_auto_a4").attr("id", "gross_auto");
  );

  $("#klein_anhaenger_1").click(function() 
    $("#gross_anhaenger").attr("id", "gross_anhaenger_a1");
  );

  $("#klein_anhaenger_2").click(function() 
    $("#gross_anhaenger").attr("id", "gross_anhaenger_a2");
  );

  $("#klein_anhaenger_3").click(function() 
    $("#gross_anhaenger").attr("id", "gross_anhaenger_a3");
  );

  $("#klein_anhaenger_4").click(function() 
    $("#gross_anhaenger").attr("id", "gross_anhaenger_a4");
  );

  $("#gross_anhaenger").click(function() 
    $("#gross_anhaenger_a1").attr("id", "gross_anhaenger");
    $("#gross_anhaenger_a2").attr("id", "gross_anhaenger");
    $("#gross_anhaenger_a3").attr("id", "gross_anhaenger");
    $("#gross_anhaenger_a4").attr("id", "gross_anhaenger");
  );

  $("#connect").click(function() 
    if ($("#gross_auto_a1").length && ('#gross_anhaenger_a1').length) 
      alert("a1+ a1");
     else if ($("#gross_auto_a1").length && ('#gross_anhaenger_a2').length) 
      alert("a1+ a2");
     else if ($("#gross_auto_a1").length && ('#gross_anhaenger_a3').length) 
      alert("a1+ a3");
     else if ($("#gross_auto_a1").length && ('#gross_anhaenger_a4').length) 
      alert("a1+ a4");
     else if ($("#gross_auto_a2").length && ('#gross_anhaenger_a1').length) 
      alert("a1+ a1");
     else if ($("#gross_auto_a2").length && ('#gross_anhaenger_a2').length) 
      alert("a1+ a2");
     else if ($("#gross_auto_a2").length && ('#gross_anhaenger_a3').length) 
      alert("a1+ a3");
     else if ($("#gross_auto_a2").length && ('#gross_anhaenger_a4').length) 
      alert("a1+ a4");
     else if ($("#gross_auto_a3").length && ('#gross_anhaenger_a1').length) 
      alert("a1+ a1");
     else if ($("#gross_auto_a3").length && ('#gross_anhaenger_a2').length) 
      alert("a1+ a2");
     else if ($("#gross_auto_a3").length && ('#gross_anhaenger_a3').length) 
      alert("a1+ a3");
     else if ($("#gross_auto_a4").length && ('#gross_anhaenger_a4').length) 
      alert("a1+ a4");
     else if ($("#gross_auto_a4").length && ('#gross_anhaenger_a1').length) 
      alert("a1+ a1");
     else if ($("#gross_auto_a4").length && ('#gross_anhaenger_a2').length) 
      alert("a1+ a2");
     else if ($("#gross_auto_a4").length && ('#gross_anhaenger_a3').length) 
      alert("a1+ a3");
     else if ($("#gross_auto_a4").length && ('#gross_anhaenger_a4').length) 
      alert("a1+ a4");
    
  );
);

html,
body 
  margin: 0;
  border: 0;
  padding: 0;


html 
  width: 100%;
  height: 100%;


body 
  background-color: black;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: -moz-none;
  /* Firefox 2+ */
  -moz-user-select: none;
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
  user-drag: none;
  -webkit-user-drag: none;


#picturelayer 
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;


#image 
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;


#index 
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;



/*
#auto 
        position: absolute;
        width: 40vw;
        height: 75vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;

*/

#h1 
  color: black;
  position: absolute;
  left: 50%;
  top: 5%;
  margin: 0 auto;


#gross_auto 
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  left: 5%;
  margin: 0 auto;
  border-style: solid;
  display: none;


#gross_auto_a1 
  position: absolute;
  background-image: url("../images/1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  left: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#gross_auto_a2 
  position: absolute;
  background-image: url("../images/2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  left: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#gross_auto_a3 
  position: absolute;
  background-image: url("../images/3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  left: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#gross_auto_a4 
  position: absolute;
  background-image: url("../images/4.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  left: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;



/*
#klein_auto 
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 38vw;
        height: 28vh;
        top: 2%;
        bottom: 1%;
        margin: 0 auto;
        border-style: solid;

*/

#klein_auto_1 
  position: absolute;
  background-image: url("../images/1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 56%;
  left: 5.5%;
  margin: 0 auto;
  border-style: solid;


#klein_auto_2 
  position: absolute;
  background-image: url("../images/2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 56%;
  left: 23.6%;
  margin: 0 auto;
  border-style: solid;


#klein_auto_3 
  position: absolute;
  background-image: url("../images/3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 75%;
  left: 5.5%;
  margin: 0 auto;
  border-style: solid;


#klein_auto_4 
  position: absolute;
  background-image: url("../images/4.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 75%;
  left: 23.6%;
  margin: 0 auto;
  border-style: solid;



/*
#anhaenger 
        position: absolute;
        width: 40vw;
        height: 75vh;
        top: 20%;
        right: 5%;
        margin: 0 auto;
        border-style: solid;

*/

#gross_anhaenger 
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  right: 5%;
  margin: 0 auto;
  border-style: solid;
  display: none;


#gross_anhaenger_a1 
  position: absolute;
  background-image: url("../images/5.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  right: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#gross_anhaenger_a2 
  position: absolute;
  background-image: url("../images/6.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  right: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#gross_anhaenger_a3 
  position: absolute;
  background-image: url("../images/7.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  right: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#gross_anhaenger_a4 
  position: absolute;
  background-image: url("../images/8.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 30vw;
  height: 32vh;
  top: 20%;
  right: 5%;
  margin: 0 auto;
  border-style: solid;
  display: block;


#klein_anhaenger_1 
  position: absolute;
  background-image: url("../images/5.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 56%;
  right: 23.6%;
  margin: 0 auto;
  border-style: solid;


#klein_anhaenger_2 
  position: absolute;
  background-image: url("../images/6.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 56%;
  right: 5.5%;
  margin: 0 auto;
  border-style: solid;


#klein_anhaenger_3 
  position: absolute;
  background-image: url("../images/7.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 75%;
  right: 23.6%;
  margin: 0 auto;
  border-style: solid;


#klein_anhaenger_4 
  position: absolute;
  background-image: url("../images/8.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 11vw;
  height: 14vh;
  top: 75%;
  right: 5.5%;
  margin: 0 auto;
  border-style: solid;


#connect 
  position: absolute;
  background-image: url("../images/connect.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 8vw;
  height: 6vh;
  top: 35%;
  left: 46%;


#result 
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: none;


#image_result 
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;


area 
  outline: none;



/*
html, body 
            margin: 0;
            border: 0;
            padding: 0;


html 
        width: 100%;
        height: 100%;


body 
        background-color: black;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        text-rendering: optimizelegibility;
        -webkit-font-smoothing: antialiased;
        -webkit-user-select: none;/* Safari 3.1+ 
        -moz-user-select: -moz-none; /* Firefox 2+ 
        -moz-user-select: none;
        -ms-user-select: none; /* IE 10+ 
        user-select: none; /* Standard syntax 
        user-drag: none; 
        -webkit-user-drag: none;

 

#picturelayer 
        text-align: center;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;


#image 
        text-align: center;
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: block;


.index 
        text-align: center;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;



#auto 
        position: absolute;
        width: 40vw;
        height: 75vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;


.h1 
    color: black;
    position: absolute;
    left: 50%;
    top: 5%;
    margin: 0 auto;    


.h2 
    color: red;
    position: absolute;
    left: 50%;
    top: 5%;
    margin: 0 auto;    


.gross_auto 
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 30vw;
        height: 32vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;
        display: none;


.gross_auto_a1 
        position: absolute;
        background-image: url("../images/1.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 30vw;
        height: 32vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;
        display: block;


.gross_auto_a2 
        position: absolute;
        background-image: url("../images/2.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 30vw;
        height: 32vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;
        display: block;


.gross_auto_a3 
        position: absolute;
        background-image: url("../images/3.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 30vw;
        height: 32vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;
        display: block;


.gross_auto_a4 
        position: absolute;
        background-image: url("../images/4.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 30vw;
        height: 32vh;
        top: 20%;
        left: 5%;
        margin: 0 auto;
        border-style: solid;
        display: block;



#klein_auto 
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 38vw;
        height: 28vh;
        top: 2%;
        bottom: 1%;
        margin: 0 auto;
        border-style: solid;


.klein_auto_1 
        position: absolute;
        background-image: url("../images/1.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 56%;
        left: 5.5%;
        margin: 0 auto;
        border-style: solid;


.klein_auto_2 
        position: absolute;
        background-image: url("../images/2.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 56%;
        left: 23.6%;
        margin: 0 auto;
        border-style: solid;


.klein_auto_3 
        position: absolute;
        background-image: url("../images/3.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 75%;
        left: 5.5%;
        margin: 0 auto;
        border-style: solid;


.klein_auto_4 
        position: absolute;
        background-image: url("../images/4.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 75%;
        left: 23.6%;
        margin: 0 auto;
        border-style: solid;


/*
#anhaenger 
        position: absolute;
        width: 40vw;
        height: 75vh;
        top: 20%;
        right: 5%;
        margin: 0 auto;
        border-style: solid;


.gross_anhaenger 
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 30vw;
        height: 32vh;
        top: 20%;
        right: 5%;
        margin: 0 auto;
        border-style: solid;
        display: none;


.klein_anhaenger_1 
        position: absolute;
        background-image: url("../images/5.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 56%;                                           
        right: 23.6%;
        margin: 0 auto;
        border-style: solid;


.klein_anhaenger_2 
        position: absolute;
        background-image: url("../images/6.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 56%;
        right: 5.5%;
        margin: 0 auto;
        border-style: solid;


.klein_anhaenger_3 
        position: absolute;
        background-image: url("../images/7.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 75%;
        right: 23.6%;
        margin: 0 auto;
        border-style: solid;


.klein_anhaenger_4 
        position: absolute;
        background-image: url("../images/8.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 11vw;
        height: 14vh;
        top: 75%;
        right: 5.5%;
        margin: 0 auto;
        border-style: solid;


.connect 
        position: absolute;
        background-image: url("../images/connect.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        width: 8vw;
        height: 6vh;
        top: 35%;
        left: 46%;


.result 
        text-align: center;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: none;


.image_result 
        text-align: center;
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: block;

area  
    outline: none;

*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="picturelayer">

  <img id="image" src="images/0.png" border="0" orgwidth="1920" orgheight="1080" usemap="#image-maps-2016-09-02-023703" alt="" />
  <map name="image-maps-2016-09-02-023703" id="imagemapscom-image-maps-2016-09-02-023703">
    <div id="index">
      <div id="auto">
        <div id="gross_auto"></div>
        <div id ="klein_auto">
          <button id="klein_auto_1"></button>
          <button id="klein_auto_2"></button>
          <button id="klein_auto_3"></button>
          <button id="klein_auto_4"></button>
        </div>
      </div>
      <div id="anhaenger">
        <div id="gross_anhaenger"></div>
        <div id="klein_anhaenger">
          <button id="klein_anhaenger_1"></button>
          <button id="klein_anhaenger_2"></button>
          <button id="klein_anhaenger_3"></button>
          <button id="klein_anhaenger_4"></button>
        </div>
      </div>        
      <h1 id="h1">welcome</h1>
      <button id="connect"></button>
    </div>
    <div id="result">
      <img id="image_result">
    </div>
  </map>
</div>

答案

尝试这样的事情。

var kleinAuto;
var kleinAnhaenger;

$('.klein_auto').on('click', function (e) 
    kleinAuto = $(e.target) // Reference to clicked element by e.target
                 .attr('value'); // Get "value" attribute
);

$('.klein_anhaenger').on('click', function (e) 
    kleinAnhaenger = $(e.target).attr('value');
);

$('#connect').on('click', function () 
    if (kleinAuto === undefined || kleinAnhaenger === undefined) 
        alert('Please click buttons');
     else 
        alert('Klein auto: ' + kleinAuto + ', Klein anhaenger: ' + kleinAnhaenger);
        // Reset
        kleinAuto = undefined;
        kleinAnhaenger = undefined;
    
);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="auto">
            <div id="gross_auto"></div>
            <div id="klein_auto">
                <button class="klein_auto" value="1">1</button>
                <button class="klein_auto" value="2">2</button>
                <button class="klein_auto" value="3">3</button>
                <button class="klein_auto" value="4">4</button>
            </div>
        </div>
        <div id="anhaenger">
            <div id="gross_anhaenger"></div>
            <div id="klein_anhaenger">
                <button class="klein_anhaenger" value="1">1</button>
                <button class="klein_anhaenger" value="2">2</button>
                <button class="klein_anhaenger" value="3">3</button>
                <button class="klein_anhaenger" value="4">4</button>
            </div>
        </div>
        <button id="connect">Connect</button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
</html>

以上是关于如何使按钮检查是否单击了其他按钮的主要内容，如果未能解决你的问题，请参考以下文章

通过按钮更改 viewpager 片段 Click

如何检查是否单击后退按钮

如何在按钮单击时添加/删除片段？

如何通过单击 Android 中的按钮使 VideoView 全屏显示？

如何使向上按钮返回而不是打开导航抽屉

如何在片段中使用按钮[关闭]