在按钮上使用 'this' 的 jQuery 选择

Posted 2023-03-07

【中文标题】在按钮上使用 \'this\' 的 jQuery 选择

【英文标题】：jQuery selection using 'this' on a button在按钮上使用 'this' 的 jQuery 选择

【发布时间】：2017-01-26 13:30:21

【问题描述】：

我有 5 个 div，每个 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 %>

谢谢！

【问题讨论】：

把你所有的html结构，用按钮。

有点乱，但是，等一下

【参考方案1】：

我会对在我之前回答但使用 .closest 的人做类似的事情。 如果编辑按钮一直在 .content div 中，那么我将使用以下内容：

$(".editBTN").click(function()  
  var $text = $(this).closest('.content').find('text');
  console.log($text.text());
);

我认为 .closest() 在标记更改方面是最安全的选择。因为 .parent().parent() 对你的 HTML 结构做了很多假设，如果你添加更多的内部 div 并且 .parents() 会循环遍历所有祖先并根据选择器过滤它们，所以它看起来像很多额外的努力得到你想要的结果。

【讨论】：

谢谢兄弟！有用！所有在这里回答的人都有效，但我想我会选择这个答案

【参考方案2】：

发生这种情况是因为文本类应用于您的所有文本，因此它们将全部选中。您可以在每个 foreach 中添加 id，以便在之后单独识别它们，或者只查找 HTML 结构：

$(".editBTN").click(function()
   var $text = $(this).parents('.content').find('.text');
   console.log($text.text());
);

【参考方案3】：

试试这个：

$(".editBTN").click(function()
  console.log($(".text", $(this).parent().parent()).text())
);

外部 jQuery 调用的第二个参数表示要在其中搜索第一个参数表示的元素的元素。

【讨论】：

谢谢大哥！