Javascript 如何使用JQuery更改EJS中的元素和单个元素_Javascript_Jquery_Node.js_Ejs

Javascript 如何使用JQuery更改EJS中的元素和单个元素

javascript jquery node.js

Javascript 如何使用JQuery更改EJS中的元素和单个元素,javascript,jquery,node.js,ejs,Javascript,Jquery,Node.js,Ejs,所以我现在有个问题。在我的代码中，当向用户显示代码时，我会遍历一个数组。但是，当我想使用JQuery选择一个元素以使用.val方法进行更改时，它会更改具有该类名的所有元素吗？我不熟悉Node和JQuery，所以请给我指出任何重复项。我如何使它在点击元素时只改变元素 JQuery代码： $('.likebutton').on('click', function(){ // hit like console.log("like clicked?"); // works // i ne

所以我现在有个问题。在我的代码中，当向用户显示代码时，我会遍历一个数组。但是，当我想使用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>

使用关键字“this”

您需要引用被单击的对象，您可以使用“this”来完成此操作

因此，在代码中，更改：

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

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

为此：

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

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

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

我想要这个按钮、输入、链接或任何我附加事件的东西来完成任务

阅读有关“this”关键字的更多信息

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

始终获取第一个值的原因是，查询选择器查找ID为changeit的第一个元素，并使用该元素的值

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

因此，在代码中，更改：

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

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

为此：

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

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

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