使用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!'); 
}); 

---

FYI：它总是最好使用普通类编辑按钮，并使用它选择它们。

例如，如果你给所有的编辑按钮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

对于未来目的，我强烈建议添加它自己的类，因为如果编辑从我更改t在链接列表中的位置，它只会打破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>