如何构建一个函数来查找被点击的 2 个特定按钮？

Question

问候，

我正在通过一些在线资源和我的兄弟学习编码，他在该领域工作以努力进入开发职业。现在我正在开发一个愚蠢的网络应用程序，您可以在其中匹配照片。每张照片的下方都有一个带有唯一 ID 的按钮。目前，当您选择一个按钮时，它会变成蓝色。

我正在尝试创建一个函数来查找被点击的 2 个特定按钮。

如果我要在与你的对话中说出我想让它做的事情，我会说“如果在选择 button4 时选择 button1，则执行此操作”

我在寻找什么功能？

任何人都可以帮助这个 n00b 吗？

下面我有点击按钮时的功能。更改类以调整颜色。

我可以发布任何必要的代码，否则这就是我想发布的全部内容。 {BC1b 是一个应该与 F1b 配对的按钮}

  function sbtnb1() {
        document.getElementById("BC1b").className = "selected";
    }

Answer 1

这是一个例子。

https://jsfiddle.net/273rhzyw/

使用 Jquery https://jsfiddle.net/agoLcuv8/8/

   // All buttons with class of button
const buttons = document.querySelectorAll(".button");

// declare array to keep the match checks
let matchCheckerArray = [];

// Loop through each button and attach an onClick
buttons.forEach(function(button) {
  button.onclick = function() {
    clickHandler(button);
  }
});

const clickHandler = function(button) {
  matchCheckerArray.push(button.dataset.matchId)
  console.log(matchCheckerArray);
  if (matchCheckerArray.length == 2) {
    if (isMatch()) {
      alert('Match');
    }
    matchCheckerArray = [];
    return;
  }
}

const isMatch = function() {
  if (matchCheckerArray[0] === matchCheckerArray[1]) {
    return true;
  }

  return false;
}

Answer 2

我会保留两个全局变量（或一个数组/变量集）来存储被点击的内容。您可以随意操作这些（例如，如果用户选择了两张不匹配的照片，则清除选择；如果不匹配，请不要让用户选择第二张卡片；等等...） .

这可以与您已有的东西结合使用。类名将允许您添加特定的选定样式，而全局变量允许您跟踪已选择的内容。全局变量还允许您检查匹配或不匹配。

Answer 3

有很多方法可以做到这一点，但这是我的做法。

$(".checkButton").on("click", function(){

  // toggle button state
  if($(this).attr("data-state") == "on") {
    $(this).attr("data-state", "off");  // toggle button off
    $(this).removeClass("highlight"); // remove highlight
    $(".myImage").removeClass("highlight"); // remove highlight
  } else {
    $(this).attr("data-state", "on"); // make button active
    $(this).addClass("highlight"); // add highlight
  }
  
  //----------------------------------------------------------
  // Here you would have to build your checks and how you want
  // the comparison of buttons and images to be linked.
  //----------------------------------------------------------
  // For example:
  // check if more than 2 buttons are active and if buttons match the if statement.
  var buttonCount = 0;
  
  $("#buttonContainer button").each(function(){    
    if($(this).attr("data-state") == "on"){
      buttonCount += 1;
    }    
  });
  
  
  // if 2 buttons are clicked then check then allow to do something
  if(buttonCount == 2){
    
    // highlight image 1 if buttons 1 and 2 are on.  
    if($(".checkButton[data-id=b1]").attr("data-state") == "on" &&
       $(".checkButton[data-id=b2]").attr("data-state") == "on"){        
        $("#image1").addClass("highlight");       
    }
    
      // highlight image 2 if buttons 3 and 4 are on.  
    if($(".checkButton[data-id=b3]").attr("data-state") == "on" &&
       $(".checkButton[data-id=b4]").attr("data-state") == "on"){        
        $("#image2").addClass("highlight");       
    }
    
  }
  
  //----------------------------------------------------------
  
});

.myImage {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: black;
  float: left;
}

.highlight {
  outline: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 100%; height: 110px;">
  <div class="myImage" id="image1"></div>
  <div class="myImage" id="image2"></div>
</div>

<div id="buttonContainer" style="width: 100%;">
  <button class='checkButton' data-id="b1" data-state='off'>button 1</button>
  <button class='checkButton' data-id="b2" data-state='off'>button 2</button>
  <button class='checkButton' data-id="b3" data-state='off'>button 3</button>
  <button class='checkButton' data-id="b4" data-state='off'>button 4</button>
</div>