javascript - 如何使用Javascript在单击事件的文本框中分别存储不同按钮的值？

问题描述

我正在开发一个考勤模块，这是代码的原型，但我有一些错误。

如您所见，有动态生成的按钮，它们会在单击事件时改变颜色。我还在单击时将按钮的值存储在文本框中，因为我必须使用 PhP 在后端处理这些数据，错误是当我将按钮变为绿色时，它的值进入文本框，当我再次将其变为红色时相同值也进入另一个文本框，这是我不想要的。因此，请通过减少数据的重复性或提供不同提交按钮的代码来帮助我解决此问题，单击该按钮时会检查所有按钮的颜色并将值分别存储在不同的文本框中，一个用于红色，一个用于绿色. 提前致谢。

<html>
  <head>
    <title>Button click event</title>
    </head>
  <body>

  <?php
  for($i=0;$i<=10;$i++) {
    ?>
    <button class="btnColorChange" id="<?php echo $i; ?>" style="background-color:#FF0000"><?php echo $i; ?></button>
    <?php
  }
  ?>

  <div>
    <input type="text" name="text1" id="textbox1" value=""/><br><br>
    <input type="text" name="text2" id="textbox2" value=""/><br><br>
  </div>

  <script>
  $(".btnColorChange").click(function(){
    xyz = this.id
    if(this.clicked){
      $(this).css('background-color', '#FF0000');
      const tb=document.querySelector("#textbox1");
      tb.value=tb.value+","+xyz;
      console.log(xyz)
      this.clicked  = false;
    } else {
      $(this).css('background-color', '#008000');
      const tb2=document.querySelector("#textbox2");
      tb2.value=tb2.value+","+xyz;
      console.log(xyz)
      this.clicked  = true;
    }
  });
  </script>

  </body>
</html>

标签： javascriptjquerybuttondynamictextbox

首先，下面的说法是错误的：

有动态生成的按钮...

在谈论“动态”元素时，我们谈论的是页面加载时不存在的元素。这里不是这种情况，因为它们是在页面加载之前在服务器端创建的。使用循环不会使它们“动态”。

要存储单击/未单击的 id，我建议您为此使用一些数组。

据我了解，您需要分别所有“单击”和“未单击” ID。
“从不点击”被忽略。

使用两个数组，您可以将 id 存储在相关组中......甚至对它们进行排序（可选）。

您可以将这些数组直接发送到您的后端......因此这些input元素现在仅用于测试目的。

查看代码中的注释：

// Arrays to store ids
var clicked = [],
    unclicked = [];

$(".btnColorChange").on("click",function(){
  // useful for this demo
  console.clear();

  // Get the clicked element id
  var this_id = this.id;
  console.log("Clicked id: "+this_id);

  // Toggle the classes (button colors)
  $(this).toggleClass("clicked unclicked");

  // Check if in array
  var in_clicked = $.inArray(this_id,clicked);
  var in_unclicked = $.inArray(this_id,unclicked);
  //console.log(in_clicked+" "+in_unclicked)

  // If clicked
  if($(this).hasClass("clicked")){
    if(in_clicked==-1){
      clicked.push(this_id);
      clicked.sort();
    }
    if(in_unclicked>-1){
      unclicked.splice(in_unclicked,1);
    }
  }

  // If unclicked
  if($(this).hasClass("unclicked")){
    if(in_unclicked==-1){
      unclicked.push(this_id);
      unclicked.sort();
    }
    if(in_clicked>-1){
      clicked.splice(in_clicked,1);
    }
  }

  // Show arrays content in console
  console.log(clicked);
  console.log(unclicked);

  // Show the ids in inputs as a coma separated string
  $("#textbox1").val(clicked.join(","));
  $("#textbox2").val(unclicked.join(","));
});

.unclicked{
  background-color: #FF0000;
}
.clicked{
  background-color: #008000;
}

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

<button class="btnColorChange unclicked" id="1">1</button>
<button class="btnColorChange unclicked" id="2">2</button>
<button class="btnColorChange unclicked" id="3">3</button>
<button class="btnColorChange unclicked" id="4">4</button>
<button class="btnColorChange unclicked" id="5">5</button>
<br>
<br>
<div>
  <input type="text" name="text1" id="textbox1" value=""/><br><br>
  <input type="text" name="text2" id="textbox2" value=""/><br><br>
</div>

由于控制台日志，请以全页模式运行代码段。

如需更多阅读，以下演示使用以下方法：

你肯定注意到我对按钮颜色使用了两个 CSS 规则，而不是内联样式属性。

代码笔

javascript - 如何使用Javascript在单击事件的文本框中分别存储不同按钮的值？

问题描述

解决方案

推荐阅读