Javascript 10分 + - 5分 + - 0分 + - 0分 + - <ul id = "tracklist"> <li class = "trackwrap"> <a c

Javascript 10分 + - 5分 + - 0分 + - 0分 + - <ul id = "tracklist"> <li class = "trackwrap"> <a c,javascript,jquery,html,css,Javascript,Jquery,Html,Css,10分 + - 5分 + - 0分 + - 0分 + - <ul id = "tracklist"> <li class = "trackwrap"> <a class = "tracklink" href="https://www.link1.com">Track 1</a> <p class = "trackscore">10 points&l

  • 10分

    + -
  • 5分

    + -
  • 0分

    + -
  • 0分

    + -
  •     <ul id = "tracklist">
            <li class = "trackwrap">
                <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
                <p class = "trackscore">10 points</p>
                <button class = "upvote" type="button">+</button>
                <button class = "downvote" type="button">-</button>
            </li>
            <li class = "trackwrap">
                <a  class = "tracklink" href="https://www.link2.com">Track 2</a>
                <p class = "trackscore">5 points</p>
                <button class = "upvote" type="button">+</button>
                <button class = "downvote" type="button">-</button>
            </li>
            <li class = "trackwrap">
                <a  class = "tracklink" href="https://www.link3.com">Track 3</a>
                <p class = "trackscore">0 points</p>
                <button class = "upvote" type="button">+</button>
                <button class = "downvote" type="button">-</button>
            </li>
            <li class = "trackwrap">
                <a  class = "tracklink" href="https://www.link4.com">Track 4</a>
                <p class = "trackscore">0 points</p>
                <button class = "upvote" type="button">+</button>
                <button class = "downvote" type="button">-</button>
            </li>
        </ul>
    
    $(".upvote").on("click", function() {
        // ...
    });
    // (And similar for downvote)
    
    $("#tracklist").on("click", ".upvote", function() {
        // ...
    });
    // (And similar for downvote)
    
    var trackwrap = $(this).closest(".trackwrap");
    
    var trackscore = trackwrap.find(".trackscore");
    
        <li class = "trackwrap">
            <a  class = "tracklink" href="https://www.link1.com">Track 1</a>
            <p class = "trackscore">10 points</p>
            <button class = "upvote" onclick="upvote(this)" type="button">+</button>
            <button class = "downvote" type="button">-</button>
        </li>
    
     function upvote(btn) {
         var parentElement = btn.parentElement;
    
         // use parentElement to edit DOM
         parentElement.style.color = "red";
     }
    
    $(".upvote").click(function(){
    
       $(this).parent().css({"color":"#0f0"});
       // or $(this).parent().addClass("green");
    
    });