使用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>