返回event.target错误元素的JQuery Onclick

hiz5n14c  于 2023-01-16  发布在  jQuery
关注(0)|答案(3)|浏览(127)

我尝试打印我用类piece点击的目标的id。

function attachClickHandlers() {
  $('.piece').click(function(event) {
    console.log(event.target.id)
  })
}

attachClickHandlers();

超文本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="full-board">
      <div id="pieces">
        <img src="assets/w_r.svg" id="w_r1" class="piece">
        <img src="assets/w_n.svg" id="w_n1" class="piece">
        <img src="assets/w_b.svg" id="w_b1" class="piece">
        <img src="assets/w_q.svg" id="w_q" class="piece">
        <img src="assets/w_k.svg" id="w_k" class="piece">
        <img src="assets/w_b.svg" id="w_b2" class="piece">
        <img src="assets/w_n.svg" id="w_n2" class="piece">
        <img src="assets/w_r.svg" id="w_r2" class="piece">

        <img src="assets/w_p.svg" id="w_p1" class="piece">
        <img src="assets/w_p.svg" id="w_p2" class="piece">
        <img src="assets/w_p.svg" id="w_p3" class="piece">
        <img src="assets/w_p.svg" id="w_p4" class="piece">
        <img src="assets/w_p.svg" id="w_p5" class="piece">
        <img src="assets/w_p.svg" id="w_p6" class="piece">
        <img src="assets/w_p.svg" id="w_p7" class="piece">
        <img src="assets/w_p.svg" id="w_p8" class="piece">

        <img src="assets/b_r.svg" id="b_r1" class="piece">
        <img src="assets/b_n.svg" id="b_n1" class="piece">
        <img src="assets/b_b.svg" id="b_b1" class="piece">
        <img src="assets/b_q.svg" id="b_q" class="piece">
        <img src="assets/b_k.svg" id="b_k" class="piece">
        <img src="assets/b_b.svg" id="b_b2" class="piece">
        <img src="assets/b_n.svg" id="b_n2" class="piece">
        <img src="assets/b_r.svg" id="b_r2" class="piece">

        <img src="assets/b_p.svg" id="b_p1" class="piece">
        <img src="assets/b_p.svg" id="b_p2" class="piece">
        <img src="assets/b_p.svg" id="b_p3" class="piece">
        <img src="assets/b_p.svg" id="b_p4" class="piece">
        <img src="assets/b_p.svg" id="b_p5" class="piece">
        <img src="assets/b_p.svg" id="b_p6" class="piece">
        <img src="assets/b_p.svg" id="b_p7" class="piece">
        <img src="assets/b_p.svg" id="b_p8" class="piece">
      </div>


然而，如果我点击第一行的任何白色棋子（卒），它会打印w_p8，如果我点击第二行的任何白色棋子，它会打印w_r2。
我哪里做错了？
编辑：它对大多数尝试过的人都有效，所以它可能是我代码中的其他东西。抱歉，我没有在开始时包含它，我认为其他东西不会有太大影响，我设法在JSFiddle上重现了这个问题：https://jsfiddle.net/chy86fbq/

jquery

3条答案

按热度按时间
c0vxltue

c0vxltue1#

你说：
我尝试打印我用类"piece"单击的目标的id，该类的名称还包括"w"。
可能你的意思是id而不是name。所以你需要检查id是否是includesw，然后记录它。还要注意你错过了一个结束标记div。

    • 更新**

根据您关于共享整个代码（https://jsfiddle.net/chy86fbq/）的评论，您正在使用position = 'absolute'，并且没有设置left和top。您需要为piece类设置left和top，而不是设置paddingLeft和paddingTop。

console.clear();
   attachClickHandlers();
        function attachClickHandlers() {
            $('.piece').click(function (event) {
                if (event.target.id.includes("w"))
                    console.log(event.target.id)
            })
        }
img {
            display: inline-block;
            width: 50px;
            height: 50px;
            outline: 1px solid black;
        }
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <div id="full-board">
        <div id="pieces">
            <img src="assets/w_r.svg" alt="w_r1" id="w_r1" class="piece">
            <img src="assets/w_n.svg" alt="w_n1" id="w_n1" class="piece">
            <img src="assets/w_b.svg" alt="w_b1" id="w_b1" class="piece">
            <img src="assets/w_q.svg" alt="w_q" id="w_q" class="piece">
            <img src="assets/w_k.svg" alt="w_k" id="w_k" class="piece">
            <img src="assets/w_b.svg" alt="w_b2" id="w_b2" class="piece">
            <img src="assets/w_n.svg" alt="w_n2" id="w_n2" class="piece">
            <img src="assets/w_r.svg" alt="w_r2" id="w_r2" class="piece">

            <img src="assets/w_p.svg" alt="w_p1" id="w_p1" class="piece">
            <img src="assets/w_p.svg" alt="w_p2" id="w_p2" class="piece">
            <img src="assets/w_p.svg" alt="w_p3" id="w_p3" class="piece">
            <img src="assets/w_p.svg" alt="w_p4" id="w_p4" class="piece">
            <img src="assets/w_p.svg" alt="w_p5" id="w_p5" class="piece">
            <img src="assets/w_p.svg" alt="w_p6" id="w_p6" class="piece">
            <img src="assets/w_p.svg" alt="w_p7" id="w_p7" class="piece">
            <img src="assets/w_p.svg" alt="w_p8" id="w_p8" class="piece">

            <img src="assets/b_r.svg" alt="b_r1" id="b_r1" class="piece">
            <img src="assets/b_n.svg" alt="b_n1" id="b_n1" class="piece">
            <img src="assets/b_b.svg" alt="b_b1" id="b_b1" class="piece">
            <img src="assets/b_q.svg" alt="b_q" id="b_q" class="piece">
            <img src="assets/b_k.svg" alt="b_k" id="b_k" class="piece">
            <img src="assets/b_b.svg" alt="b_b2" id="b_b2" class="piece">
            <img src="assets/b_n.svg" alt="b_n2" id="b_n2" class="piece">
            <img src="assets/b_r.svg" alt="b_r2" id="b_r2" class="piece">

            <img src="assets/b_p.svg" alt="b_p1" id="b_p1" class="piece">
            <img src="assets/b_p.svg" alt="b_p2" id="b_p2" class="piece">
            <img src="assets/b_p.svg" alt="b_p3" id="b_p3" class="piece">
            <img src="assets/b_p.svg" alt="b_p4" id="b_p4" class="piece">
            <img src="assets/b_p.svg" alt="b_p5" id="b_p5" class="piece">
            <img src="assets/b_p.svg" alt="b_p6" id="b_p6" class="piece">
            <img src="assets/b_p.svg" alt="b_p7" id="b_p7" class="piece">
            <img src="assets/b_p.svg" alt="b_p8" id="b_p8" class="piece">
        </div>
    </div>
赞(0）分享  回复(0）举报  2023-01-16
s4n0splo

s4n0splo2#

函数attachClickHandlers需要在document.ready中初始化，并检查w，请按照以下代码执行

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
   <div id="full-board">
      <div id="pieces">
         <img src="assets/w_r.svg" id="w_r1" class="piece">
         <img src="assets/w_n.svg" id="w_n1" class="piece">
         <img src="assets/w_b.svg" id="w_b1" class="piece">
         <img src="assets/w_q.svg" id="w_q" class="piece">
         <img src="assets/w_k.svg" id="w_k" class="piece">
         <img src="assets/w_b.svg" id="w_b2" class="piece">
         <img src="assets/w_n.svg" id="w_n2" class="piece">
         <img src="assets/w_r.svg" id="w_r2" class="piece">
         <img src="assets/w_p.svg" id="w_p1" class="piece">
         <img src="assets/w_p.svg" id="w_p2" class="piece">
         <img src="assets/w_p.svg" id="w_p3" class="piece">
         <img src="assets/w_p.svg" id="w_p4" class="piece">
         <img src="assets/w_p.svg" id="w_p5" class="piece">
         <img src="assets/w_p.svg" id="w_p6" class="piece">
         <img src="assets/w_p.svg" id="w_p7" class="piece">
         <img src="assets/w_p.svg" id="w_p8" class="piece">
         <img src="assets/b_r.svg" id="b_r1" class="piece">
         <img src="assets/b_n.svg" id="b_n1" class="piece">
         <img src="assets/b_b.svg" id="b_b1" class="piece">
         <img src="assets/b_q.svg" id="b_q" class="piece">
         <img src="assets/b_k.svg" id="b_k" class="piece">
         <img src="assets/b_b.svg" id="b_b2" class="piece">
         <img src="assets/b_n.svg" id="b_n2" class="piece">
         <img src="assets/b_r.svg" id="b_r2" class="piece">
         <img src="assets/b_p.svg" id="b_p1" class="piece">
         <img src="assets/b_p.svg" id="b_p2" class="piece">
         <img src="assets/b_p.svg" id="b_p3" class="piece">
         <img src="assets/b_p.svg" id="b_p4" class="piece">
         <img src="assets/b_p.svg" id="b_p5" class="piece">
         <img src="assets/b_p.svg" id="b_p6" class="piece">
         <img src="assets/b_p.svg" id="b_p7" class="piece">
         <img src="assets/b_p.svg" id="b_p8" class="piece">
      </div>
   </div>
</body>
<script>
   function attachClickHandlers() {
             $('.piece').click(function(event) {
   
              console.log("event.target.id.includes('w')" +event.target.id.includes("w"));
   console.log("event.target.id" +event.target.id);
          });
          }
            $( document ).ready(function() {
     attachClickHandlers();
   });
       
</script>

参考-https://api.jquery.com/ready/、https://api.jquery.com/contains-selector/、https://www.w3schools.com/jsref/jsref_includes.asp
问候DK

赞(0）分享  回复(0）举报  2023-01-16
jjjwad0x

jjjwad0x3#

我花了三个小时来寻找解决方案，我使用类名来捕捉事件，但是一旦我给每个元素提供了不同的id，现在事件$(this)指向了正确的元素。

赞(0）分享  回复(0）举报  2023-01-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com