使用jQuery选择器编辑帖子

Question

我希望我的onclick功能在用户点击编辑帖子链接时作出响应。目前只有第一个编辑帖子链接正在运行。不确定是什么问题，因为jQuery应该使用post类检索所有元素，然后检索具有交互类的所有元素，最后检索作为其后代的第三个锚元素，并在用户单击链接时使用控制台消息进行响应。

$('.post').find('.interaction').find('a').eq(2).on('click', function() {
  console.log('It works!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="row posts">
    <div class="col-md-6 col-md-offset-3">
      <header><h3>What other people say...</h3></header>
              <article class="post">
          <p>Post for edit</p>
            <div class="info">
              Posted by danny on 2017-01-16 17:13:17
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
                              <a href="#">Edit</a> |
                <a href="http://urlproject.dev/delete-post/8">Delete</a>
              
            </div>
        </article>
              <article class="post">
          <p>Another post!</p>
            <div class="info">
              Posted by danny on 2017-01-16 17:12:57
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
                              <a href="#">Edit</a> |
                <a href="http://urlproject.dev/delete-post/7">Delete</a>
              
            </div>
        </article>
              <article class="post">
          <p>I&#039;m None</p>
            <div class="info">
              Posted by none on 2017-01-12 21:42:44
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
              
            </div>
        </article>
          </div>
  </section>

Answer 1

eq()方法根据索引从整个选定元素集合中选择一个元素。

让所有第三个孩子a使用:nth-child(3)或:nth-of-type(3)更具体。

$('.post .interaction a:nth-of-type(3)').on('click', function() {
  console.log('It works!');
});

<小时/> 仅供参考：使用公共类进行编辑按钮并使用它来选择它们总是更好。

例如，如果您为所有编辑按钮提供edit课程：

$('.edit').on('click', function() {
  console.log('It works!');
});

Answer 2

尝试使用以下代码

var abc=$('.post').
find('.interaction').find('a').eq(2);

$(document).on('click', abc,function() {
  console.log('It works!');
});

Answer 3

像

这样的东西

$('.post').on('click', '.interaction a',  function(e) {
  if ( 'Edit' === $(e.currentTarget).text() ) {
     console.log('It works!');
  }
});

即使您移动编辑链接的位置，

也会起作用，尽管在链接中添加一个类会更好

如果您使用

   <a  class="edit" href="#">Edit</a>

你可以使用

$('.post').on('click', '.interaction a.edit',  function(e) {

});

Answer 4

只需将一个css类添加到锚点，然后再编辑，然后执行以下操作

$('.edit').on('click', function() { console.log('It works!'); });

Answer 5

为了将来的目的，我强烈建议添加它自己的类，因为如果Edit在链接列表中的位置发生变化，它就会破坏JavaScript。

将选择器缓存到变量中，以及将事件的回调函数与绑定分开也是一种很好的做法。

// Cache the links (to improve performance).
var $editLinks = $('.edit-link');


// Separate function from binding.
var handleEditLinkClick = function(e) {
  console.log('It works!');
};


// Bind function to event
$editLinks.on('click', handleEditLinkClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="row posts">
    <div class="col-md-6 col-md-offset-3">
      <header><h3>What other people say...</h3></header>
              <article class="post">
          <p>Post for edit</p>
            <div class="info">
              Posted by danny on 2017-01-16 17:13:17
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
              <a class="edit-link" href="#">Edit</a> |
                <a href="http://urlproject.dev/delete-post/8">Delete</a>
              
            </div>
        </article>
              <article class="post">
          <p>Another post!</p>
            <div class="info">
              Posted by danny on 2017-01-16 17:12:57
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
              <a class="edit-link" href="#">Edit</a> |
                <a href="http://urlproject.dev/delete-post/7">Delete</a>
              
            </div>
        </article>
              <article class="post">
          <p>I&#039;m None</p>
            <div class="info">
              Posted by none on 2017-01-12 21:42:44
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
            </div>
        </article>
          </div>
  </section>

Answer 6

如果你将eq（2）设置为（'a：eq（2）'），我认为你的查询也会有效

$('.interaction').find('a:eq(2)').click( function() {
  console.log('It works!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="row posts">
    <div class="col-md-6 col-md-offset-3">
      <header><h3>What other people say...</h3></header>
              <article class="post">
          <p>Post for edit</p>
            <div class="info">
              Posted by danny on 2017-01-16 17:13:17
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
                              <a href="#">Edit</a> |
                <a href="http://urlproject.dev/delete-post/8">Delete</a>
              
            </div>
        </article>
              <article class="post">
          <p>Another post!</p>
            <div class="info">
              Posted by danny on 2017-01-16 17:12:57
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
                              <a href="#">Edit</a> |
                <a href="http://urlproject.dev/delete-post/7">Delete</a>
              
            </div>
        </article>
              <article class="post">
          <p>I&#039;m None</p>
            <div class="info">
              Posted by none on 2017-01-12 21:42:44
            </div>
            <div class="interaction">
              <a href="#">Like</a> |
              <a href="#">Dislike</a> |
              
            </div>
        </article>
          </div>
  </section>