Question

我想对我的EJS文件中的图像应用click事件，这是ejs代码：

<div class="container" id="comments">
    <div class="row">
        <div class="col-lg-12">
            <div class="well">
                <div id="scrollit">
                    <% greword.Comments.forEach(function(comment){ %>
                    <strong><p id="author"><%= comment.author %></p></strong>
                    <i id="likesi" class="far fa-thumbs-up"></i><span id="likes"><%= comment.likes %></span>
                    <i id="dislikesi" class="far fa-thumbs-down"></i><span id="dislikes"><%= comment.dislikes %></span>
                    <span class="pull-right">10 days ago</span>
                    <p>
                        <%= comment.text %>
                    </p>
                    <% }) %>

这是我的JS代码：

$("#comments .row .col-lg-12 .well #scrollit").on("click", "#dislikesi", function(){

console.log("OK");

});

我已经检查过我的ejs文件是否已成功链接到JS文件。但是奇怪的是，它不起作用。我想不通，有人可以帮我吗？非常感谢！

// ********************************************* **更新！！！ *************************************************** // < / p>

我意识到我误用了ID，因为forEach函数将生成多个ID。因此，我更改了代码。这是我的forEach函数的新ejs代码：

<% greword.Comments.forEach(function(comment, index){ %>
                    <strong><p id="author"><%= comment.author %></p></strong>
                    <i class="far fa-thumbs-up"></i><span class="likes"><%= comment.likes %></span>
                    <i class="far fa-thumbs-down <%= index %>"></i><span class="dislikes"><%= comment.dislikes%></span>
                    <%= index %>
                    <span class="pull-right">10 days ago</span>
                    <p>
                        <%= comment.text %>
                    </p>
                    <% }) %>

我将其用作JS代码：

$("#comments #scrollit").on("click", ".2", function(){

console.log("OK");

});

以单击第三条评论的不喜欢图片。但这仍然行不通。

// ********************************************* **更新！！！ *************************************************** // < / p>

非常感谢“ LGSon”，我的代码终于可以正常工作了。

Answer 1

问题编辑后更新

一个类不能只是一个数字，例如2，因此.2不能用作选择器，它需要例如idx2。

以下内容准确显示了您要做的所有事情，例如dislikesi 按钮在单击时会触发，就像具有索引的唯一类一样，只有一个会触发，因为只有一个具有该值的项。

原始答案

看起来，您的代码重复了一组未知的元素，并且由于其中一些元素具有固定的id，因此您的选择器将无法正常工作，因为id被认为是唯一的

如果id不能唯一，请使用属性选择器[attribute='value']定位它们，例如

$("#scrollit").on("click", "[id='dislikesi']", function(){

  console.log("OK");

});

另一种选择是改用该元素的类型和类名，例如

$("#scrollit").on("click", "i.fa-thumbs-down", function(){

  console.log("OK");

});

此外，由于id应该是唯一的，因此您可以使用forEach第二个参数 index 来使它们成为唯一字符，例如像这样的id="likesi<%= index %>"

              <% greword.Comments.forEach(function(comment,index){ %>
                <strong><p id="author"><%= comment.author %></p></strong>
                <i id="likesi<%= index %>" class="far fa-thumbs-up"></i><span id="likes"><%= comment.likes %></span>
                <i id="dislikesi<%= index %>" class="far fa-thumbs-down"></i><span id="dislikes"><%= comment.dislikes %></span>
                <span class="pull-right">10 days ago</span>
                <p>
                    <%= comment.text %>
                </p>
              <% }) %>

为什么我不能将JS事件应用于我的EJS代码？

1 个答案: