如何通过将每个计数的点击按钮（只有一个在 div 上）加在一起来计算点击的按钮

Question

如果他们单击，我需要在 JS 中计算两个按钮，然后将它们降低到一个，因为我只需要在 div 中确认一次操作。 例如，如果单击 Button1 和 Button2，则我需要数字 1。如果同时单击 Button1 和 Button2 以及 Button11 和 Button22，我需要数字 2。

现在我只需要将两个计数相加，但我现在不知道如何完成它。 任何人都有任何解决方案。

我有这个代码（ http://jsfiddle.net/rjopn78x/253/ ）

 $(document).ready(function() { $('#hej').removeClass('selected3').addClass('black'); }); $(document).ready(function() { $('itemitem').removeClass('green').addClass('item'); }); $( "button#jQueryColorChange" ).click(function() { $(this).addClass( "selected" ); $(this).text("TRENING"); $(this).addClass( "selected" ); }); $( "button#jQueryColorChange2" ).click(function() { $(this).addClass( "selected2" ); $(this).text("ZNAM"); $(this).addClass( "selected2" ); }); $(".Button1").click(function(){ $('#itemitem').removeClass( "green" ); $('#itemitem').addClass( "orange" ); $('item').removeClass( "green" ); $('Button').removeClass( "selected3" ); $(this).addClass( "Button" ); $('#hej').addClass( "selected4" ); $('Button').removeClass( "selected" ); }); $(".Button2").click(function(){ $('#itemitem').removeClass( "orange" ); $('#itemitem').addClass( "green" ); $('item').removeClass( "orange" ); $('Button').removeClass( "selected4" ); $(this).addClass( "Button" ); $('#hej').addClass( "selected3" ); $('Button').removeClass( "selected2" ); }); $(document).ready(function() { $('#hejnowe').removeClass('selected5').addClass('black'); }); $(document).ready(function() { $('itemitem2').removeClass('green').addClass('item2'); }); $( "button#jQueryColorChange11" ).click(function() { $(this).addClass( "selected" ); $(this).text("TRENING"); $(this).addClass( "selected" ); }); $( "button#jQueryColorChange22" ).click(function() { $(this).addClass( "selected2" ); $(this).text("ZNAM"); $(this).addClass( "selected2" ); }); $(".Button11").click(function(){ $('#itemitem2').removeClass( "green" ); $('#itemitem2').addClass( "orange" ); $('item2').removeClass( "green" ); $('Button').removeClass( "selected5" ); $(this).addClass( "Button" ); $('#hejnowe').addClass( "selected6" ); $('Button').removeClass( "selected" ); }); $(".Button22").click(function(){ $('#itemitem2').removeClass( "orange" ); $('#itemitem2').addClass( "green" ); $('item2').removeClass( "orange" ); $('Button').removeClass( "selected6" ); $(this).addClass( "Button" ); $('#hejnowe').addClass( "selected5" ); $('Button').removeClass( "selected2" ); }); var count = 0; var counta = 0; var btn = document.getElementById("jQueryColorChange"); var btna = document.getElementById("jQueryColorChange11"); var disp = document.getElementById("display"); var dispa = document.getElementById("display2"); var dispaa = count + counta; if(dispaa < 2){ btn.onclick = function (){ count++; if (count > 1) { return false; } disp.innerHTML = count; } btna.onclick = function (){ counta++; if (counta > 1) { return false; } dispa.innerHTML = counta; } var dispaa = count + counta; } $('#something').click( function() { alert(dispaa); });

 div.menu { /* To correctly align image, regardless of content height: */ top: 15px; display: inline-block; /* To horizontally center images and caption */ /* The width of the container also implies margin around the images. */ width: 300px; height:50px; background-color: blue; text-align: center; top: 0px; } div.menu2 { /* To correctly align image, regardless of content height: */ top: 15px; display: inline-block; /* To horizontally center images and caption */ /* The width of the container also implies margin around the images. */ width: 300px; height:50px; background-color: blue; text-align: center; top: 0px; } .Button { font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: yellow; } .Button1 { text-align: center; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:orange; color: yellow; } .Button2 { font-size:13px; font-weight: bold; width: 160px; height: 25px; background:green; color: yellow; } .nowe.selected3 { color: black; background:green; border: solid; } .nowe.selected4 { color: black; background:orange; border: solid; } .selected { color: black; background:orange; border: solid; } .selected2 { color: black; background:green; border: solid; } .item { /* To correctly align image, regardless of content height: */ top: 0px; display: inline-block; /* To horizontally center images and caption */ /* The width of the container also implies margin around the images. */ width: 294px; } .ite { background-color: white; } .item.orange { background-color: orange; } .item.green { background-color: green; } div.item:hover { border: 3px red solid;} } img33 { width: 294px; height: 201px; background-color: grey; } .caption { text-align: center; /* Make the caption a block so it occupies its own line. */ display: block; color: black; } .Button { font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: yellow; } .Button11 { text-align: center; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:orange; color: yellow; } .Button22 { font-size:13px; font-weight: bold; width: 160px; height: 25px; background:green; color: yellow; } .nowe2.selected5 { color: black; background:green; border: solid; } .nowe2.selected6 { color: black; background:orange; border: solid; } .selected { color: black; background:orange; border: solid; } .selected2 { color: black; background:green; border: solid; } .item2 { /* To correctly align image, regardless of content height: */ top: 0px; display: inline-block; /* To horizontally center images and caption */ /* The width of the container also implies margin around the images. */ width: 294px; } .item2.orange { background-color: orange; } .item2.green { background-color: green; } div.item2:hover { border: 3px red solid;} } img33 { width: 294px; height: 201px; background-color: grey; } .caption { text-align: center; /* Make the caption a block so it occupies its own line. */ display: block; color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="display">0</span> <span id="display2">0</span> <a id="something">Text</a> <div class="menu"> <button id="hej" class="nowe">GUY</button> </div> <div id="itemitem" class="item"> <img id="33" src="http://smartangielski.j.pl/img/1bmix.jpg"/> <span class="caption"><u><b>Kacz</u></b>yński <u><b>łapie</u></b> motyle --- <b>catch[kacz] - łapać</b></span> <button class="Button1" id="jQueryColorChange";>TRENING</button> <br><br> <button class="Button2" id="jQueryColorChange2";>ZNAM</button> <br><br> </div> <div class="menu2"> <button id="hejnowe" class="nowe2">CATCH</button> </div> <div id="itemitem2" class="item2"> <img id="33" src="http://smartangielski.j.pl/img/1bmix.jpg"/> <span class="caption"><u><b>Kacz</u></b>yński <u><b>łapie</u></b> motyle --- <b>catch[kacz] - łapać</b></span> <button class="Button11" id="jQueryColorChange11" onclick="return myFunction()";;>TRENING</button> <br><br> <button class="Button22" id="jQueryColorChange22" onclick="return myFunction()";>ZNAM</button> <br><br> </div>

Answer 1

我找到了解决方案：

var count = 0;
var counta = 0;
        var btn = document.getElementById("jQueryColorChange");
        var btna = document.getElementById("jQueryColorChange11");
        var disp = document.getElementById("display");
        var dispa = document.getElementById("display2");
        var di = document.getElementById("display3"); ///here
  
  btn.onclick = function (){
            count++;
            if (count > 1) {
        return false;
    }
    disp.innerHTML = count;
    di.innerHTML = Number(dispa.innerHTML) + Number(disp.innerHTML); ///here
    }
        btna.onclick = function (){
            counta++;
            if (counta > 1) {
        return false;
    }
    dispa.innerHTML = counta;
    di.innerHTML = Number(dispa.innerHTML) + Number(disp.innerHTML); //and here
    }