遞增和遞減1個值 - 按鈕

我求和計算過程中的jQuery，看起來像這樣：遞增和遞減1個值 - 按鈕

<th>Name</th> 
<th>Vote</th> 
<th>Action</th> 

<tr> 
    <td>User A</td> 
    <td class="vote">5</td> 
    <td> 
    <a href="#" class="btn btn-lg btn-primary addVote">+</a> 
    <a href="#" class="btn btn-lg btn-primary subVote">-</a> 
    </td> 
</tr> 
<tr> 
    <td>User B</td> 
    <td class="vote">3</td> 
    <td> 
    <a href="#" class="btn btn-lg btn-primary addVote">+</a> 
    <a href="#" class="btn btn-lg btn-primary subVote">-</a> 
    </td> 
</tr>

這裏是我的jQuery：

$(function() { 
    $(".addVote").each(function() { 
    var vote = $('td.vote').text(), 
     newVote = parseInt(suara) + parseInt(1); 

    $(this).on('click', function() { 
     $('td.vote').text(newVote); 
    }); 
    }); 
});

什麼我想實現的是當我點擊'+'按鈕時，newVote值應該替換值值，並且每次點擊'+'按鈕時該過程都會繼續。如果單擊「 - 」按鈕，應該會發生同樣的過程。我只能做一次。下一個過程沒有任何反應我怎樣才能做到這一點？

來源

2016-07-29 MSI

我希望它會爲你工作

$(document).ready(function(){ 
     $('table').on('click','.addVote, .subVote', function() { 
     var _vote= $(this).closest('tr').find('td.vote'); 
     var change = $(this).hasClass('addVote') ? 1 : -1; 
     _vote.text((parseInt(_vote.text())+change)); 
    }); 
    });

檢查此琴鏈接https://jsfiddle.net/36udn5Lv/2/

來源

2016-07-29 06:10:25

檢查這個.. https://jsfiddle.net/36udn5Lv/2/ –

這是工作太...三江源！ – MSI

我認爲，這是一個優化的解決方案，以輕鬆的執行負載，然後羅馬的答案。所以如果你喜歡這個答案，請檢查它的權利。 –

請嘗試下面的代碼片段。

$(function() { 
 
    $(".addVote").click(function() { 
 
    $(this).parents('tr').find('td.vote').html(parseInt($(this).parents('tr').find('td.vote').html())+1); 
 
    }); 
 
    $(".subVote").click(function() { 
 
    $(this).parents('tr').find('td.vote').html(parseInt($(this).parents('tr').find('td.vote').html())-1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<table> 
 
<th>Name</th> 
 
<th>Vote</th> 
 
<th>Action</th> 
 

 
<tr> 
 
    <td>User A</td> 
 
    <td class="vote">5</td> 
 
    <td> 
 
    <a href="#" class="btn btn-lg btn-primary addVote">+</a> 
 
    <a href="#" class="btn btn-lg btn-primary subVote">-</a> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td>User B</td> 
 
    <td class="vote">3</td> 
 
    <td> 
 
    <a href="#" class="btn btn-lg btn-primary addVote">+</a> 
 
    <a href="#" class="btn btn-lg btn-primary subVote">-</a> 
 
    </td> 
 
</tr> 
 
</table>

來源

2016-07-29 06:27:33

它的工作正常。謝謝！ – MSI

@MSI，歡迎你 –

檢查：

  <html> 
      <head> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
      </head> 
      <body> 
       <table> 
        <th>Name</th> 
        <th>Vote</th> 
        <th>Action</th> 

        <tr> 
         <td>User A</td> 
         <td class="vote">5</td> 
         <td><a href="#" class="btn btn-lg btn-primary addVote">+</a> <a 
          href="#" class="btn btn-lg btn-primary subVote">-</a></td> 
        </tr> 
        <tr> 
         <td>User B</td> 
         <td class="vote">3</td> 
         <td><a href="#" class="btn btn-lg btn-primary addVote">+</a> <a 
          href="#" class="btn btn-lg btn-primary subVote">-</a></td> 
        </tr> 
       </table> 
       <script> 
           $(function() { 
            $(".addVote").click(function() { 
              var vote = $(this).closest('tr').find('td.vote').text(); 
             var newvote = parseInt(vote)+parseInt(1); 
             $(this).closest('tr').find('td.vote').text(newvote); 
            });  
            $(".subVote").click(function() { 
              var vote = $(this).closest('tr').find('td.vote').text(); 
             var newvote = parseInt(vote)-parseInt(1); 
             $(this).closest('tr').find('td.vote').text(newvote); 
            });  
           }); 
       </script> 
      </body> 
      </html>

來源

2016-07-29 06:41:03 Roma

它的工作。謝謝！所有答案都正常工作。 – MSI

遞增和遞減1個值 - 按鈕

回答

相關問題