How to get attributes of html to jquery

Question

I was trying to implement like and dislike button to comments by the guidance from a tutorial, but i cannot get attributes from my code.

this is my html code including php

 



 



$quote->quote_id is integers like 1,2
$language->list->tooltip->like = Like comment
$language->list->tooltip->dislike = Dislike comment
$vote_up = total likes
$vote_up = total dislikes

this is the jquery part

//####### on button click, get user like and send it to vote_process.php using jQuery $.post().
    $(".glyphicon").on('click', '.glyphicon', function (e) {

        //get class name (down_button / up_button) of clicked element
        var clicked_button = $(this).children().attr('class');

        //get unique ID from voted parent element
        var quote_id    = $(this).parent().attr("id"); 

        if(clicked_button==='glyphicon-minus') //user disliked the content
        {
            //prepare post content
            post_data = {'quote_id':quote_id, 'vote':'down'};

            //send our data to "vote_process.php" using jQuery $.post()
            $.post('processing/process_votes.php', post_data, function(data) {

                //replace vote down count text with new values
                $('#'+quote_id+' .down_votes').text(data);

                //thank user for the dislike

            }).fail(function(err) { 

            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }
        else if(clicked_button==='glyphicon-plus') //user liked the content
        {
            //prepare post content
            post_data = {'quote_id':quote_id, 'vote':'up'};

            //send our data to "vote_process.php" using jQuery $.post()
            $.post('processing/process_votes.php', post_data, function(data) {

                //replace vote up count text with new values
                $('#'+quote_id+' .up_votes').text(data);

                //thank user for liking the content
            }).fail(function(err) { 

            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }

    });
    //end 

        });

in jquery part i am trying to know which button is clicked by user and get id of that button

Oliver Trampleasure · Accepted Answer

.attr('class') will return all classes that are assigned to the element, which is not working as you are comparing the entire class list against a specific class (i.e 'class1 class2 class2' != 'class2').
.hasClass('specific-class') will return a boolean value depending on if that specific class has been assigned to the element in question.

Recommended Solution

You can simplify the code a little, the code below attaches a click event to anything with the class .glyphicon before using hasClass(".glyphicon-minus") or hasClass(".glyphicon-plus") to check if it is a down or up vote.

From here there are two alternatives to update the total vote for each post, you can either use your current technique (finding the closest wrapping class - I've used .post in this example) or you can add attributes to the UI elements which identify the elements that belong to that post - i.e. for="post1".

I've included the code for the second option as it is a bit shorter, but left it commented out.

There is also a check to see if the new total is 0, which then stops the process so that you cannot get negative votes. I've left this check commented out, but you can uncomment it if needed.

Hope that helps, let me know if you needed anything else.

$(".glyphicon").click(function() {

  vote = 0;

  // Check if negative vote
  if ($(this).hasClass("glyphicon-minus")) {
    vote = -1;
  }

  // Check if positive vote
  if ($(this).hasClass("glyphicon-plus")) {
    vote = 1;
  }


  // Update individual vote count
  newVoteTotal =  
  parseInt($(this).closest(".post").find(".votes").text()) + parseInt(vote);

  // Uncomment if statement and closing bracket if you want to stop usings from being able to give negative votes
  //if ( newVoteTotal != "-1" ) {
  $(this).closest(".post").find(".votes").text( newVoteTotal );
  //}


  // ALTERNATIVE using 'for' attributes
  // postID = $(this).attr("for");
  // newVoteTotal = parseInt($(".votes[for='" + postID + "']").text()) + parseInt(vote);
  // $(".votes[for='" + postID + "']").text(newVoteTotal)

})

.post {
  padding: 20px;
  border: 1px solid black;
}

.post-body {
  padding-bottom: 20px;
}



  
    Lorem ipsum post 1.
  
  
  
  0


  
    Lorem ipsum post 2.
  
  
  
  0

Specific Solution

I have tried to create a specific solution for your code structure, I believe this will work. Changes include:

$(".glyphicon").on('click', function(e) { - corrected your creation of the click event
var clicked_button = $(this).attr('class') - you can gather all classes if you wish (as later we will just check for a presence of a single class) .attr() docs
if (clicked_button.includes('glyphicon-minus') - this checks the full list of classes we gathered early, to see if a specific class is present (and returns true if it is). .include() docs

I have removed all the code that sends the info server side, and replaced it with a console.log() message to prove we have gathered all the parameters you wanted. You can add your old code back in for your production site.

//####### on button click, get user like and send it to vote_process.php using jQuery $.post().
$(".glyphicon").on('click', function(e) {

//get class name (down_button / up_button) of clicked element
var clicked_button = $(this).attr('class');

//get unique ID from voted parent element
var quote_id = $(this).parent().attr("id");

if (clicked_button.includes('glyphicon-minus')) //user disliked the content
{
  // POST like
  console.log("Liked quote-id=" + quote_id + " (via class " + clicked_button + ")");
 
} else if (clicked_button.includes('glyphicon-plus')) //user liked the content
{
  // POST dislike
  console.log("Disliked quote-id=" + quote_id + " (via class " + clicked_button + ")");
}

});
//end

.glyphicon {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.red {
  background: red;
}

.like {
  border-bottom: 5px solid green;
}

.dislike {
  border-bottom: 5px solid black;
}

How to get attributes of html to jquery

Answers (2)

Recommended Solution

Specific Solution

Related Questions