我有5个div,里面都有5个文本
<div class="text">
<%= theComment.text %>
</div>
我正在使用 nodejs、mongodb 和 mongoose。
我有一个名为 EDIT 的按钮,其类别为“editBTN”
我有我的 jQuery 代码:
$(".editBTN").click(function(){
console.log($(".text").text())
});
我想要的是,每次我单击其中一个 div 上的编辑按钮时,它都会选择它的文本消息。发生的事情是,它选择了所有 5 个 div 的所有文本。我只想在我只单击编辑按钮的地方选择文本 div。 这与“this”关键字有关吗?我怎样才能把它放在我的 jquery 代码中。
这是我的 ejs 代码:
<% include partials/header %>
<div class="container" id="profileShow">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
<div class="thumbnail">
<div class="text-center"><h2><%= userID.name %></h2>
<img src="<%= userID.image %>">
<p><em>Submitted by: <strong><%= userID.author.username %></strong> </em></p>
</div>
<div style="text-align:center;">
<form action="/index/<%= userID._id%>/edit" method="GET" id="profileForm">
<% if(currentUser && userID.author.id.equals(currentUser._id)){ %>
<button class="ui grey button tiny">
<i class="configure icon"></i>
Edit profile
</button>
</form>
<form action="/index/<%= userID._id%>?_method=DELETE" method="POST" id="profileForm">
<button class="negative ui button tiny">
<i class="configure icon"></i>
Delete profile
</button>
<% } %>
</form>
</div>
</div>
<div class="well well-sm clearfix">
<div id="commentsDiv">
<h3 class="ui dividing header">Comments</h3>
</div>
<% userID.comments.forEach(function(theComment){ %>
<div class="ui comments">
<div class="comment">
<a class="avatar" href="/profile/<%= theComment.author.id %>">
<img src="<%= theComment.author.image %>">
</a>
<div class="content">
<a class="author" href="/profile/<%= theComment.author.id %>"><%= theComment.author.username%></a>
<div class="metadata">
<span class="date"><%= theComment.date %></span>
</div>
<div class="text">
<%= theComment.text %>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
<div class="editdelete-inline">
<% if(currentUser && theComment.author.id.equals(currentUser._id)){ %>
<form action="/index/<%= userID._id %>/comments/<%= theComment._id %>?_method=DELETE" method="POST"><button class="mini ui red button" >Delete</button></form>
<button class="mini ui orange button editBTN">Edit</button>
<% } %>
</div>
</div>
</div>
</div>
<% }); %>
<% if(currentUser){ %>
<form action="/index/<%= userID._id %>/comments" method="POST">
<div class="ui fluid action input">
<input type="text" class="form-control" name="comment[text]" placeholder="Add comment..." >
<button class="btn btn-primary btn-xs">
Send<i class="send icon"></i>
</button>
</div>
</form>
<% } else { %>
<div class="alert alert-danger" role="alert">Login / Register to submit a comment</div>
<% } %>
</div>
</div>
</div>
</div>
<% include partials/footer %>
谢谢!
最佳答案
我会对在我之前回答但使用 .closest 的人做类似的事情。 如果编辑按钮始终位于 .content div 中,那么我将使用类似以下的内容:
$(".editBTN").click(function(){
var $text = $(this).closest('.content').find('text');
console.log($text.text());
});
我认为 .closest() 是标记更改时最安全的选择。因为 .parent().parent() 假设了很多关于你的 HTML 结构,如果你添加更多的内部 div 和 .parents() 将循环遍历所有祖先并根据选择器过滤它们,所以它看起来像很多额外的努力得到你想要的结果。
关于javascript - 在按钮上使用 'this' 的 jQuery 选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39563336/