通过 jQuery 选择特定元素并在 socket.io 中操作答案

【问题标题】：Select specific element by jQuery and manipulate in socket.io通过 jQuery 选择特定元素并在 socket.io 中操作
【发布时间】：2018-12-03 11:17:03
【问题描述】：

我是 node.js 和 socket.io 的新手。我想实现一个简单的功能，当套接字单击按钮时，该按钮的背景颜色将切换为蓝色。

这是我的客户端 html 代码：

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <style type="text/css">
      .blue {
          background: blue;
      }
  </style>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    $(function(){
        var socket = io();
        $("button").click(function(){
            socket.emit("click button");
            return false;
        });
        socket.on("click button", function(){
            $("button").toggleClass("blue");
        });
    });
    </script>
  <body>
    <button>Click me to change</button>
    <br>
    <button>Don't change me</button>
  </body>
</html>

这是我的 server.js 文件：

var express = require("express"),
app     = express(),
server  = require("http").createServer(app),
io      = require("socket.io").listen(server);

app.get("/", function(req, res){
    res.sendFile(__dirname + "/index.html");
});

io.on("connection", function(socket){
    socket.on("click button", function(){
        io.emit("click button");
    })
});

server.listen(process.env.PORT, process.env.IP, function(){
    console.log("The server is now starting......");
});

当然，这段代码不能工作，因为它在单击一个按钮时会切换所有按钮。但我想知道只切换被点击的按钮的正确方法是什么？

感谢您的任何建议！

【问题讨论】：

将ids 添加到您的按钮，并将被点击的按钮的ID ($(this).attr('id')) 发送到您的io.socket。在您的套接字 (socket.on()) 的 subscribe 方法中，从事件/有效负载中读取 id，并使用它通过使用 jQuery 选择器中的 id 只为相应按钮调用 toggleClass（实现这一点留给问题作者作为练习？？？？）
谢谢摩羯座！非常有用的建议

标签： jquery node.js socket.io

【解决方案1】：

您可以使用this关键字来选择被点击的元素，例如。

$("button").click(function(){
  socket.emit("click button");
  $(this).toggleClass("blue");
  return false;
});

【讨论】：

这只会触发当前网站上按钮的背景。如果我的问题是正确的，他希望通过 io 套接字发送切换触发器，从而导致潜在的其他浏览器窗口上的所有按钮也发生变化
嗯，你可能是对的。 OP有点模棱两可。
是的。我想通过套接字发送切换。原来的问题不是很清楚。对此感到抱歉。
@MingshuShi 没问题，那我建议你看看摩羯座的评论；）