-1

I have my problem in this video. The number is increase after upward arrow clicked, but not vice versa. I think the jquery code is not correct enough. I thought that i just change from top to bottom, and from +1 to -1 but i'm wrong and it doesn't work well.

the code:

<?php
    include("mwcon.php");
?>
<html>
<head>
    <link rel='stylesheet' type='text/css' href='/css/post.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
          $(".post-vote-top").click(function() {
            $(this).next(".post-vote-middle").text(function(i, v) {
              return parseInt(v, 10)+1;
            });
          });
        });
        $(document).ready(function() {
          $(".post-vote-bottom").click(function() {
            $(this).next(".post-vote-middle").text(function(i, v) {
              return parseInt(v, 10)-1;
            });
          });
        });
    </script>
</head>
<body>
<?php
    echo "
        <div id='post'>
            <table>
    ";
    $no=1;
    $q=mysql_query("SELECT * FROM t_post");
    while($f=mysql_fetch_object($q)){
        echo "
            <tr>
                <td class='post-nomor'>$no.</td>
                <td class='post-vote' align='center'>
                    <div id='main'>
                        <div class='post-vote-top'></div>
                        <div class='post-vote-middle'>$f->vote</div>
                        <div class='post-vote-bottom'></div>
                    </div>
                </td>
                <td><a href='$url' target='_blank'><img src='$f->linkimg' width='80' height='50'></img></a></td>
            </tr>
        ";
        $no++;
    }
    echo "
            </table>
        </div>
    ";
?>
</body>
</html>

Please help me. Thanks.

Juna serbaserbi
  • 205
  • 2
  • 12

1 Answers1

1

You need to use prev() instead of next(), since .post-vote-middle is before the .post-vote-bottom 

$(document).ready(function() {
  $(".post-vote-top").click(function() {
    $(this).next(".post-vote-middle").text(function(i, v) {
      return parseInt(v, 10) + 1;
    });
  });
  $(".post-vote-bottom").click(function() {
    $(this).prev(".post-vote-middle").text(function(i, v) {
      return parseInt(v, 10) - 1;
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td id='post-nomor'>$no.</td>
    <td id='post-vote' align='center'>
      <div class='main'>
        <div class='post-vote-top'>up</div>
        <div class='post-vote-middle'>1</div>
        <div class='post-vote-bottom'>down</div>
      </div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td id='post-nomor'>$no.</td>
    <td id='post-vote' align='center'>
      <div class='main'>
        <div class='post-vote-top'>up</div>
        <div class='post-vote-middle'>1</div>
        <div class='post-vote-bottom'>down</div>
      </div>
    </td>
    <td></td>
  </tr>
</table>

If you want to avoid negative value then use 

$(document).ready(function() {
  $(".post-vote-top").click(function() {
    $(this).next(".post-vote-middle").text(function(i, v) {
      return parseInt(v, 10) + 1;
    });
  });
  $(".post-vote-bottom").click(function() {
    $(this).prev(".post-vote-middle").text(function(i, v) {
      v = parseInt(v, 10);
      if (v > 0)
        return v - 1;
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td id='post-nomor'>$no.</td>
    <td id='post-vote' align='center'>
      <div class='main'>
        <div class='post-vote-top'>up</div>
        <div class='post-vote-middle'>1</div>
        <div class='post-vote-bottom'>down</div>
      </div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td id='post-nomor'>$no.</td>
    <td id='post-vote' align='center'>
      <div class='main'>
        <div class='post-vote-top'>up</div>
        <div class='post-vote-middle'>1</div>
        <div class='post-vote-bottom'>down</div>
      </div>
    </td>
    <td></td>
  </tr>
</table>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188