如何在onclick時將多個href與同一類進行區分？

我在頁面上有多個按鈕（一個href鏈接），用於向上或向下投票產品。如何在onclick時將多個href與同一類進行區分？

我剛剛提出了一些生成相同鏈接按鈕結構的示例代碼。

<?php for($i=0;$i<30;$i++){ ?> 
<a data-id="<?php echo $i; ?>" href="#" class="vote"> 
    <button class="btn-no btn-vote">Yes</button> 
</a> 
<?php } ?>

我有這樣的jQuery腳本處理單擊本身：當我我能得到正確的ID的元素上點擊，但後來它運行槽頁面上的元素的休息，倒計時。

在這個例子中，它給了我30個彈出窗口和所有數字。我只需要點擊元素的ID。

<script> 
    $('.message').hide(); 

    $('.vote').click(function(e){ 

     e.preventDefault(); 

     var element = this; 
     var id = $(element).closest('span').data('id'); 

     alert(id); 

    }); 
</script>

來源

2016-07-25 sdfgg45


 
$('.vote').click(function(e){ 
 

 
    e.preventDefault(); 
 

 
    var element = $(this); 
 
    var id = $(element).data('id'); 
 

 
    alert(id); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-id="1" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a><br/> 
 
<a data-id="2" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a><br/> 
 
<a data-id="3" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a><br/> 
 
<a data-id="4" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a><br/> 
 
<a data-id="5" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a><br/> 
 
<a data-id="6" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a><br/> 
 
<a data-id="7" href="#" class="vote"> 
 
    <button class="btn-no btn-vote">Yes</button> 
 
</a>

您的腳本應該是像下面。不需要.closest（'span'），因爲這樣的data-id屬性在'a'標籤中。

<script> 
$('.message').hide(); 

$('.vote').click(function(e){ 

    e.preventDefault(); 

    var element = $(this); 
    var id = $(element).data('id'); 

    alert(id); 

}); 
</script>

來源

2016-07-25 12:33:26

沒有像'＃divId'這樣的元素，這就是他爲什麼使用類的原因。 – vaso123

我們也可以在課堂上使用這個腳本。不需要#divId。看看我剛剛更新的答案。 –

請檢查我的代碼片段。 –

-1

您應該在HTML中使用唯一的ID。

變化data-id="1"到data-id="<?php echo $i; ?>"

您還可以通過縮短你的代碼，並刪除跨度，因爲你必須在你的代碼中沒有跨越。

alert($(this).data('id'));

這裏是一個工作jsFiddle

來源

2016-07-25 12:25:33 vaso123

從myside – sdfgg45

錯字爲什麼這個工作答案downvoted？我永遠不會明白這一點。 – vaso123

檢查：

   <html> 
       <head> 
        <script src="js/jquery-1.12.1.js"></script> 
       </head> 
       <body> 
        <?php for($i=1;$i<12;$i++){ ?> 
          <a data-id="<?php echo $i; ?>" href="#" class="vote"><button class="btn-no btn-vote">Yes</button></a> 
        <?php } ?> 
        <script> 
         $('.message').hide(); 
         $('.vote').click(function(e) { 
           e.preventDefault(); 
           var id = $(this).data('id'); 
           alert(id); 
         }); 
        </script> 
       </body> 
      </html>

來源

2016-07-25 12:46:34 Roma

如何在onclick時將多個href與同一類進行區分？

回答

相關問題