Question

这是我面临的情况的图像 screenshot IMAGE我有2个按钮从html表单获取它们的值，我使用节点js和套接字。当我点击其他选项卡中的一个标签按钮中的按钮时，点击了相同的ID，但我想要的是当我点击一个值为1的按钮（示例）时，应该点击值为1的按钮，这不会发生在这里。我正在考虑一种方法，我可以使用按钮值作为按钮ID，任何人都可以帮助我。

修改

我正在考虑使用IF / ELSE条件，当我们点击一个按钮时，它会搜索一个带有点击按钮值的按钮并触发它

app.js

const io = require('socket.io')(3000);
io.on('connection', function (socket) {
    console.log('a client has connected');
    socket.on('clicked', function() {
        io.emit('clicked');
    });

socket.on('clicked1', function() {
        io.emit('clicked1');
    });
    });



console.log('socket.io server started at port 3000');

的index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>


<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->

</head>
<body bgcolor="#3C4C55">
<script>
if (document.all||document.getElementById){
document.write('<style>.tictac{')
document.write('width:50px;height:30px;padding: 5px;  font-weight: bold; cursor: pointer; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 75%;')
document.write('}</style>')
}
</script>
<div class="main">
<center>
</br></br></br></br></br></br>
<form method="get" action="button.html">
<table id="employeeTable" border="15" cellpadding="5" align="center" style="background-color:orange" >
    <tr>

<td>
<input type="number" id="sq1" name="sqrone"   placeholder="Value" class="tictac"  />
</td>
<td>
<input type="number" id="sq2" name="sqrtwo"   placeholder="Value" class="tictac"  />
</td>
</tr>

</table>
</br></br>

<div class="submit">
                <input type="submit"  value="Submit" onclick="saveVal()">

    </div>

           <script type="text/javascript"> 
function saveVal() {
    var squ1 = document.getElementById("sq1").value;
    localStorage.setItem("sq1", squ1);
    squ1 = localStorage.getItem("sq1");

    var squ2 = document.getElementById("sq2").value;
    localStorage.setItem("sq2", squ2);
    squ2 = localStorage.getItem("sq2");

}

</script>
 <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "dskstkcm"
    }], "*")
  }
</script>
</form>
        </center>
        </div>
</body>
</html>

button.html

<!doctype html>
  <html>
    <head>
      <title>Testing socket.io</title>
      <style>.tictac{
    width:100px;height:100px;
    padding: 10px;
    font-weight: bold; 
    background:#16ed07; 
    color: #000000; 
    cursor: pointer;
    border-radius: 10px; 
    border: 1px solid #D9D9D9; 
    font-size: 150%;
    }
    </style>
      </head>
    <body>
    <form>
      <input type="button" id="sq1" NAME="sqr1" class="tictac" value="Send!" onClick="onClickHandler(this)"/>

      <input type="button" id="sq2" NAME="sqr2" class="tictac" value="Get!" onClick="onClickHandler(this)"/>

      </form>

      <script type="text/javascript">

    var square1 = document.getElementById("sq1");
    square1.value = localStorage.getItem("sq1");

    var square2 = document.getElementById("sq2");
    square2.value = localStorage.getItem("sq2");

</script>

      <h2 id="alert"> waiting...</h2>


      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
      <script>
        var socket = io("http://localhost:3000");
        socket.on('connect', function() {
          document.getElementById("sq1").addEventListener("click", function () {
              socket.emit("clicked");
          });
          document.getElementById("sq2").addEventListener("click", function () {
              socket.emit("clicked1");
          });
         });
        socket.on('clicked', function() {
  var button = document.getElementById('sq1');

  console.log('clicked');
  document.getElementById("alert").innerHTML = "1 clicked";

  onClickHandler(sq1);
});
socket.on('clicked1', function() {
  var button = document.getElementById('sq2');

  console.log('clicked1');
  document.getElementById("alert").innerHTML = "2 clicked";

  onClickHandler(sq2);
});



      </script>

       <script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

    </body>
  </html>

Answer 1

您可能想要做的是提取有关单击了哪个按钮的信息，然后使用socket.io发出该数据。 socket.emit的第二个参数可以是将传递给socket.on('event', function(data){ /* data passed from socket.emit */ })的侦听器的对象。您可能需要以相同的方式从服务器重新发出此数据。

客户端示例：https://jsfiddle.net/wcmtk5mj/

请确保在上述示例中使用onClicked和socket.emit时删除socket.on模拟。

在javascript中使用按钮值作为按钮ID

1 个答案: