如何使用 JQuery 更改 EJS 中的单个元素答案

【问题标题】：How do can I change and individual element in EJS using JQuery如何使用 JQuery 更改 EJS 中的单个元素
【发布时间】：2019-12-22 07:55:11
【问题描述】：

所以我现在遇到了问题。在我的代码中，我在向用户显示我的代码时会遍历一个数组。但是，当我想使用 JQuery 选择一个元素以使用 .val 方法进行更改时，它会更改具有该类名的所有元素吗？我是 Node 和 JQuery 的新手，所以请指出任何重复项。我怎样才能使它在点击元素时只有该元素发生变化？

JQuery 代码：

$('.likebutton').on('click', function(){ // hit like
    console.log("like clicked?"); // works
    // i need to find a way to connect this with code and make it update???

    var curr = $('#changeit').val();
    var item = $('.likebutton').val('Liked'); // problem
    console.log("item: " + curr);
    $.ajax({ //do something with the data via front-end framework, so we can update in reall time
      type: 'GET',
      url: '/',
      success: function(err){
        // here we will get the data, find it in the data base and update it. Changes will occur 
        // via a reload, either manually or when they create a post, for now. Later we can update 
        // the thing in real time.

        // on click we must also change the color of the thing too to show that it was liked
        console.log('success!'); 
      }
    });
      return false;

    });

EJS 代码

<!DOCTYPE html>
<html>
    <head>
    </head>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="/assets/chat.js"></script>    
    <body>
        <h1> Ut whispers</h1>
        <form action="/" method="POST">
            <input type="text" placeholder = "say something" name="msg"> <input type="submit" value="Submit"> <br>
        </form>
        <ul>
            <% for(var i = 0; i < chats.length; i++) { %>
            <li class = "display"><%= chats[i].msg %> <input type="button" id = "changeit" class = "likebutton" value = "Like: (<%=chats[i].likes%>)" >
                <ul>
                    <li>replies will go here</li>
                </ul>
            </li>
            <% } %>
        </ul>
    </body>
</html>

【问题讨论】：

标签： javascript jquery node.js ejs

【解决方案1】：

使用关键字'this'

“In many ... programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.”

你需要引用被点击的对象，你可以通过使用'this'来做到这一点。

所以在你的代码中，改变：

var item = $('.likebutton').val('Liked'); // problem

到这里：

var item = $(this).val('Liked'); // problem

当我这样想时，我发现更容易记住关键字：

我想要这个东西（按钮、输入、链接或其他任何东西）我将事件附加到以执行任务。

详细了解“this”关键字here。

回答您的评论。在 for 循环中，您使用的是 ID。这不是一个好主意，因为 ID 不会是唯一的，因此您应该在 for 循环中删除对 ID 的任何引用。

之所以总是得到第一个值，是因为查询选择器会找到第一个具有 ID (#changeit) 的元素并使用该元素的值。

您应该再次使用“this”关键字来获取值，因为您尝试获取的值存储在您单击的按钮中。

所以在你的代码中，改变：

var curr = $('#changeit').val();

到这里：

var curr = $(this).val();

【讨论】：

非常感谢，这正是我想要的！但是，单击按钮时，接收到的输入始终是数组的顶部元素？有什么办法可以解决这个问题，这样我们就可以获得适当的元素数组引用？
@cjenwere4 我用对您的价值问题的解释和解决方案更新了我的答案。