如何在click jQuery函数中正确传递$(this)

2024-02-21

我正在尝试用 jQuery 制作一个 tictactoe 项目,但遇到了一个大问题......

瓷砖在<td>标签,我试图做到这一点,以便当用户单击图块时,它会调用“标记”功能。

如果我们现在研究“标记”函数,$(this)旨在成为<td>调用该函数的节点。

然而,它没有做任何事情,所以我检查了控制台,显然$(this)包含 DOM Window 对象。

无论如何我可以发送正确的类型吗$(this)到“标记”功能?

谢谢你!

<script type="text/javascript">

    var TURN_X = false;
    var TURN_O = true;

    var turn = false;  // this is to see whos turn it is.

    $(document).ready(function(){

        var listCells = $.makeArray($("td"));
        $("td").click(function(){marked(listCells)});   //THIS IS WHERE I HAVE PROBLEMS
        return false;
    });

    function marked(arr)
    {
        console.log($(this));  // THIS CONSOLE LOG RETURNS "DOM Window"
        $(this).addClass("marked");

        if(turn == TURN_X)
        {
        this.innerHTML = "X";
        turn = false;
        }
        else
        this.innerHTML = "O";

        var tileNum = $(this).attr("id");
    }

您的代码没有遵循正确的原则。

$(function(){
    var TURN_X = "X",
        TURN_O = "O", 
        turn   = TURN_O,
        $listCells = $("td");

    function marked() {        // define event handler
        var $this   = $(this),
            tileNum = $this.attr("id");

        if ( !($this.hasClass("marked") ) {
            $this.addClass("marked").text(turn);
            turn = (turn == TURN_X) ? TURN_O : TURN_X;
        }
    }

    $listCells.click(marked);  // attach event handler
});
  1. 将所有内容包装在 document.ready 函数中。尽可能避免全局变量。
  2. 利用 jQuery 管理的事实this为你。this如果您直接传递回调函数而不是自己调用它们,那么将始终是您所期望的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在click jQuery函数中正确传递$(this) 的相关文章

  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 如何在phonegap应用程序中使用存储在localStorage中的json feed?

    这就是我正在做的 向我的网络服务器发出请求 响应采用 json 格式 使用 jquery 模板在我的应用程序中呈现回调数据 非常简单 就像魅力一样 问题是 我想在本地存储一些数据 这样我的应用程序就不必每次都从服务器获取它 3g 很慢 每笔
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • JQUERY 中用于加载 JQGRID 的选项卡

    我正在使用 jqgrid 制作网格 我想在我的应用程序中创建选项卡 单击选项卡应打开一个网格 选项卡的名称应显示在页面顶部 当我单击另一个选项卡时 它应该加载另一个网格 网格应该加载在同一页面上 并且选项卡也应该始终出现在页面上 我已经创建
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 如何发送正确的授权标头以进行基本身份验证

    我正在尝试从 API 发布数据 但无法通过基本身份验证 I try ajax type POST url http theappurl com api v1 method data crossDomain true beforeSend f
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 在 Objective C 的类方法中引用类本身

    我希望我没有跳过 ObjC 手册中的这一部分 但是是否可以从类的一个类方法中引用该类 就像在 PHP 中一样 您将使用 this 来引用当前实例 而 self 引用实例的类 this 的 ObjC 等价物将是 self 那么 PHP 的 s
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 帕斯卡三角形

    我正在使用 python 脚本寻找帕斯卡三角形 我已经完成到这里了 不知道如何添加 numstr raw input please enter the height height int tri row1 1 row2 1 1 tri ap
  • 使用 Lodash/Javascript 过滤嵌套数组

    我有以下对象数组 var sizeList id 1 title Test1 type name Big present false name Small present true name Medium present false id
  • Android 图像按钮工具提示

    我正在尝试构建一个带有图像按钮的应用程序 其工作方式类似于操作栏 但我无法让它们在长按时显示工具提示
  • 修复配置错误的镜像 zfs 池

    我的机器从两个 USB 设备的镜像 zfs 池启动 以前的泳池是这样的 sudo zpool status pool freenas boot state ONLINE scan resilvered 891M in 15h19m with
  • 使用模板函数的不同类型的输入

    我尝试使用模板函数从用户那里获取输入 我希望能够输入 int double float 和 strings 这是我到目前为止的代码 template
  • 知道在Windows机器上杀死哪个java.exe进程[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 当基于 java 的应用程序在 Windows 计算机上开始出现异常时 如果您无法正常退出该应用程序 您希望能够在任务管理器中终止该进程 大多数时候
  • ASP.NET MVC:如何添加视图、脚本和内容文件作为链接以便跨项目共享? (通过VS中的“添加为链接”)

    我有一个想要共享的通用 Layout cshtml 文件 当我将文件添加为项目中的链接 通过 添加现有项目 gt 添加为链接 时 我收到一条错误 指出在运行应用程序时找不到该文件 如果我将构建操作设置为 始终复制 它会将文件复制到构建目录
  • 将 /socket.io/socket.io.js 缩小为 1.0

    今天socket io 1 0已经发布了 我刚刚更新 现在以下内容不再起作用 io enable browser client minification io enable browser client etag io enable bro
  • selenium.common.exceptions.ElementNotVisibleException:消息:尝试使用 Python + Selenium 访问元素时元素不可见

    我尝试在以下网站中输入用户名和密码 https www thegreatcoursesplus com sign in https www thegreatcoursesplus com sign in driver webdriver C
  • SQL Server 错误 916

    当我尝试附加数据库时出现此错误 错误信息 发生异常 执行transact sql语句时 或批次 我已将数据库复制到 SQL Server 服务器的 Data 文件夹中 我想在 SQL Server 中配置数据库 但是当我尝试附加数据库时 出
  • 使用 CameraPreview 时获取 GPS 数据的问题

    我尝试编写一些 AR 应用程序 现在 我编写了一些代码来显示相机预览并从设备上的传感器 加速计 指南针 GPS 接收器 获取数据 当我在单独的应用程序中运行代码时 例如相机预览作为一个应用程序和作为第二个应用程序获取 GPS 数据的应用程序
  • 如何将多个外部侦听器注册到 d3 中的同一选择?

    我正在 d3 中编写一个项目 其中有一个 html 页面 其中包含两个外部 javascript 文件 例如script 1 js and script 2 js 我需要从 script 1 js 注册一个事件侦听器 从 script 2
  • pip 无法在 Mac 上的 docker 容器内安装软件包

    我正在关注Docker 入门 https docs docker com get started part2 将 docker 与 python 应用程序一起使用的指南 但是当 docker 执行命令时 RUN pip install r
  • 如何防止子视图与标签栏重叠?

    我有一个底部带有标签栏的视图 该视图被推送到导航控制器上 因此顶部也有一个导航栏 对于这个视图 我想显示一个表视图 它是我从它自己的笔尖创建的 当我将此视图添加为子视图时 它与选项卡栏重叠 有没有办法让这个子视图自动调整大小到顶部栏和底部栏
  • for 循环/for_each 的每次迭代可以并行完成吗? (C++11)

    我正在迭代结构向量并单独处理每个结构 它看起来像这样 for each begin data end data DoTask assume data is std vector
  • 具有固定标题的可滚动表格

    我为此在 PHP HTML CSS 中搜索了一些解决方案 但到目前为止没有任何效果 也许是因为大多数示例中的代码太多 所以我迷失了其中 有人可以向我解释我需要做什么或在这里放置一些简单的示例代码吗 使用 CSS 固定表头 最简单的是posi
  • 使 cURL 输出 STDERR 到文件(或字符串)

    我们正在尝试调试服务器上的一些 cURL 错误 我想查看 STDERR 日志 目前 我们只能看到错误 错误代码 7 并且无法连接到目标服务器 我们已经联系了主机并制定了特殊规则来打开我们需要的端口 我们甚至暂时忽略了证书 尽管如此 我们还是
  • 如何通过Java反射动态创建Java类?

    反射用于加载 java 类并动态操作它们 但我遇到了一个奇怪的问题 它问我如何通过 Reflection 即时创建 Java 类 我的意思是 在我们希望创建它们之前 这些类不会被编译或具有源代码 真的可能吗 有什么例子吗 你可以看一下Bea
  • 如何将 jsdoc 参数传递给 Web 请求?

    我有这样的功能 在 Node js Firebase 中 并且想知道如何添加 JSDoc 格式的文档 exports getUserRes functions https onRequest async request response g
  • 如何在click jQuery函数中正确传递$(this)

    我正在尝试用 jQuery 制作一个 tictactoe 项目 但遇到了一个大问题 瓷砖在 td 标签 我试图做到这一点 以便当用户单击图块时 它会调用 标记 功能 如果我们现在研究 标记 函数 this 旨在成为 td 调用该函数的节点