你的问题是

Question

我有一堆动态生成的帖子，有了它，我试图重现Facebook在点击评论链接时将焦点放在它下方的textarea上所具有的相同功能。但是，我似乎无法在那堵墙内抓住正确的文本区域。假设我们有15个帖子，因此我们有15条评论链接和textareas评论。现在，我使用jquery来监听那个事件...

$(".wall-post").on("click", ".comment", function (event) {

event.preventDefault();

var id = $(".wall-post").attr("id");

//this keeps logging the same id
//I have also tried referring to 'this' but that does not work 
console.log(id);    

$("#"+id+ " .post-comment").focus();

});

我想也许冒泡可以用来获取被点击的实际链接的父元素的id。不幸的是，我不认为我实际上可以为此目的使用冒泡。所以现在我只是在黑暗中拍摄。

欢迎任何建议

Answer 1

你的问题是

var id = $（＆＃34; .wall-post＆＃34;）。attr（＆＃34; id＆＃34;）;

使用此行，您可以使用班级＆＃34; wall-post＆＃34;来搜索对象。并获得他们的身份证。而你需要做的是获取实际点击的对象。

尝试使用

var id = $（this）.attr（＆＃34; id＆＃34;）;

＆＃34;这＆＃34;涉及实际点击的对象。

我建议做的是

$（本）.find（＆＃34; .POST注释＆＃34）聚焦（）;

使用＆＃34;这个＆＃34;然后，您可以使用find来搜索元素（例如，后评论）并专注于它们。

Answer 2

我相信标记会是这样的（简写）：

.wall-post#<id>
    .content (or whatever)
    .comments
        .comment <-- [1]
    .post-comment

在点击处理程序中，this将引用评论节点本身，如上面[1]所示。

所以你想做的就是从向上回到包含它的.wall-post，然后在那里找到.post-comment节点。

那将是：

$(this).closest('.wall-post').find('.post-comment').focus();

你根本不需要提取id就好了！

Answer 3

您可以使用closest查找父帖子，然后在父元素的上下文中使用find来查找文本区域。请参阅下面的演示。

＆＃13;

$(function() {
  $("#wall").on('click', '.add-comment', function(e) {
    e.preventDefault();
    $(this)
      .closest('.post')
      .find('.post-comment')
      .focus();
  });
});

＆＃13;

.post {
  width: 300px;
  padding: 2px;
  margin: 4px;
  border: 1px solid lightblue;
}
.post-text {
  margin-top: 0px;
  margin-bottom: 2px;
  padding: 0px;
}
.add-comment {
  display: block;
  margin-top: 0px;
  margin-bottom: 15px;
}
.comment {
  display: block;
  border-top: 1px solid lightgray;
  background-color: #f6f7f8;
}
.post-comment {
  margin-top: 5px;
  border-radius: 4px;
  width: 95%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wall">
  <div class="post">
    <p class="post-text">The rain in spain falls mainly on the plain.</p>
    <a href="#" class="add-comment">comment</a>
    <div class="comment-section">
      <span class="comment">This is cool!</span>
      <span class="comment">I like it!</span>
      <textarea class="post-comment" placeholder="Add a comment..."></textarea>
    </div>
  </div>
  <div class="post">
    <p class="post-text">Super-cali-fragialistic-expi-ali-docious</p>
    <a href="#" class="add-comment">comment</a>
    <div class="comment-section">
      <span class="comment">That's weird!</span>
      <textarea class="post-comment" placeholder="Add a comment..."></textarea>
    </div>
  </div>
</div>

＆＃13;

侦听动态内容上的click事件并确定父元素

3 个答案:

你的问题是

我建议做的是