Mixing
Making like button change color after user click it
0
This wouldn't be hard for me to solve if i didn't had 2 same id's for each element
I have image with it's own id in database
this is the like button
<a id='$id' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a>
and this is the dislike button
<a id='$id' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a>
in php i have made that both button ids = same because it's images unique id which is in database latter on based on that ID it being posted to database via this code
function vote(vote, val) {
var params = {"vote": vote, "id": val.id};
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function (response) {
// code
}
});
}
others told me it's wrong to use same id for 2 elements i think it can be solved if someone could just give me code
find class where class = angle-up and id = 1 change class to checked
i could make that both id aren't same but then i should need to store that id in other place and then get it via code and i have no idea how to do that so this is more easier for me
javascript jquery css
edited Jan 2 at 19:17
skellertor
360217
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
add a comment |
0
This wouldn't be hard for me to solve if i didn't had 2 same id's for each element
I have image with it's own id in database
this is the like button
<a id='$id' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a>
and this is the dislike button
<a id='$id' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a>
in php i have made that both button ids = same because it's images unique id which is in database latter on based on that ID it being posted to database via this code
function vote(vote, val) {
var params = {"vote": vote, "id": val.id};
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function (response) {
// code
}
});
}
others told me it's wrong to use same id for 2 elements i think it can be solved if someone could just give me code
find class where class = angle-up and id = 1 change class to checked
i could make that both id aren't same but then i should need to store that id in other place and then get it via code and i have no idea how to do that so this is more easier for me
javascript jquery css
edited Jan 2 at 19:17
skellertor
360217
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
8
IDs must be unique. Use a class or two different IDs -$("a.$voteup")and$("a.$votedown")should work
– mplungjan
Jan 2 at 15:51
Others would be correct asids are meant to be unique.
– Drew Reese
Jan 2 at 16:15
add a comment |
0
0
0
This wouldn't be hard for me to solve if i didn't had 2 same id's for each element
I have image with it's own id in database
this is the like button
<a id='$id' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a>
and this is the dislike button
<a id='$id' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a>
in php i have made that both button ids = same because it's images unique id which is in database latter on based on that ID it being posted to database via this code
function vote(vote, val) {
var params = {"vote": vote, "id": val.id};
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function (response) {
// code
}
});
}
others told me it's wrong to use same id for 2 elements i think it can be solved if someone could just give me code
find class where class = angle-up and id = 1 change class to checked
i could make that both id aren't same but then i should need to store that id in other place and then get it via code and i have no idea how to do that so this is more easier for me
javascript jquery css
edited Jan 2 at 19:17
skellertor
360217
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
This wouldn't be hard for me to solve if i didn't had 2 same id's for each element
I have image with it's own id in database
this is the like button
<a id='$id' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a>
and this is the dislike button
<a id='$id' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a>
in php i have made that both button ids = same because it's images unique id which is in database latter on based on that ID it being posted to database via this code
function vote(vote, val) {
var params = {"vote": vote, "id": val.id};
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function (response) {
// code
}
});
}
others told me it's wrong to use same id for 2 elements i think it can be solved if someone could just give me code
find class where class = angle-up and id = 1 change class to checked
i could make that both id aren't same but then i should need to store that id in other place and then get it via code and i have no idea how to do that so this is more easier for me
javascript jquery css
javascript jquery css
edited Jan 2 at 19:17
skellertor
360217
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
edited Jan 2 at 19:17
skellertor
360217
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
edited Jan 2 at 19:17
skellertor
360217
edited Jan 2 at 19:17
skellertor
360217
edited Jan 2 at 19:17
skellertor
360217
360217
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
asked Jan 2 at 15:49
Artis LaizansArtis Laizans
44
44
8
IDs must be unique. Use a class or two different IDs -$("a.$voteup")and$("a.$votedown")should work
– mplungjan
Jan 2 at 15:51
Others would be correct asids are meant to be unique.
– Drew Reese
Jan 2 at 16:15
add a comment |
8
IDs must be unique. Use a class or two different IDs -$("a.$voteup")and$("a.$votedown")should work
– mplungjan
Jan 2 at 15:51
Others would be correct asids are meant to be unique.
– Drew Reese
Jan 2 at 16:15
8
8
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")and $("a.$votedown") should work– mplungjan
Jan 2 at 15:51
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")and $("a.$votedown") should work– mplungjan
Jan 2 at 15:51
Others would be correct as
ids are meant to be unique.– Drew Reese
Jan 2 at 16:15
Others would be correct as
ids are meant to be unique.– Drew Reese
Jan 2 at 16:15
add a comment |
4 Answers
4
active
oldest
votes
0
Use $(this) to target the clicked button, without need for an id or even a class :
$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>Also, avoid using inline onclick=. Use jQuery to bind click events.
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
not toggle then,addClass.
– Jeremy Thille
Jan 2 at 19:12
add a comment |
0
id must be unique to reference a DOM element. You can either use different ids, or use a class.
function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
add a comment |
0
You can use ".classname" to change color.
$(".fas fa-angle-up $voteup").click(function(){
$(this).css( "background-color", "red" );
});
answered Jan 2 at 16:02
KashanKashan
101111
add a comment |
0
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")
and
$("a.$votedown")
should work
but this is recommended
function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
can i add code here?
– Artis Laizans
Jan 2 at 16:29
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
Please see update.....
– mplungjan
Jan 2 at 16:40
|
show 15 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009266%2fmaking-like-button-change-color-after-user-click-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Use $(this) to target the clicked button, without need for an id or even a class :
$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>Also, avoid using inline onclick=. Use jQuery to bind click events.
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
not toggle then,addClass.
– Jeremy Thille
Jan 2 at 19:12
add a comment |
0
Use $(this) to target the clicked button, without need for an id or even a class :
$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>Also, avoid using inline onclick=. Use jQuery to bind click events.
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
not toggle then,addClass.
– Jeremy Thille
Jan 2 at 19:12
add a comment |
0
0
0
Use $(this) to target the clicked button, without need for an id or even a class :
$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>Also, avoid using inline onclick=. Use jQuery to bind click events.
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
Use $(this) to target the clicked button, without need for an id or even a class :
$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>Also, avoid using inline onclick=. Use jQuery to bind click events.
$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>$("button").click( function(){ $(this).toggleClass("clicked") }).clicked{
background : chartreuse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
answered Jan 2 at 16:00
Jeremy ThilleJeremy Thille
14k42339
14k42339
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
not toggle then,addClass.
– Jeremy Thille
Jan 2 at 19:12
add a comment |
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
not toggle then,addClass.
– Jeremy Thille
Jan 2 at 19:12
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
He'd likely not want to toggle this class when he has two links.
– mplungjan
Jan 2 at 16:27
not toggle then,
addClass.– Jeremy Thille
Jan 2 at 19:12
not toggle then,
addClass.– Jeremy Thille
Jan 2 at 19:12
add a comment |
0
id must be unique to reference a DOM element. You can either use different ids, or use a class.
function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
add a comment |
0
id must be unique to reference a DOM element. You can either use different ids, or use a class.
function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
add a comment |
0
0
0
id must be unique to reference a DOM element. You can either use different ids, or use a class.
function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
id must be unique to reference a DOM element. You can either use different ids, or use a class.
function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>function vote(vote, id) {
console.log(vote, id);
}.daddy {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#btn1 {
height: 3em;
width: 10em;
color: white;
background-color: #444444;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
#btn2 {
margin-left: 1em;
height: 3em;
width: 10em;
color: white;
background-color: pink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}<div class="daddy">
<div id="btn1" onclick='vote("up", this.id);'>UP</div>
<div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
edited Jan 2 at 16:06
answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
answered Jan 2 at 16:01
Grégory NEUTGrégory NEUT
9,72721941
9,72721941
add a comment |
add a comment |
0
You can use ".classname" to change color.
$(".fas fa-angle-up $voteup").click(function(){
$(this).css( "background-color", "red" );
});
answered Jan 2 at 16:02
KashanKashan
101111
add a comment |
0
You can use ".classname" to change color.
$(".fas fa-angle-up $voteup").click(function(){
$(this).css( "background-color", "red" );
});
answered Jan 2 at 16:02
KashanKashan
101111
add a comment |
0
0
0
You can use ".classname" to change color.
$(".fas fa-angle-up $voteup").click(function(){
$(this).css( "background-color", "red" );
});
answered Jan 2 at 16:02
KashanKashan
101111
You can use ".classname" to change color.
$(".fas fa-angle-up $voteup").click(function(){
$(this).css( "background-color", "red" );
});
answered Jan 2 at 16:02
KashanKashan
101111
edited Jan 2 at 16:08
answered Jan 2 at 16:02
KashanKashan
101111
answered Jan 2 at 16:02
KashanKashan
101111
answered Jan 2 at 16:02
KashanKashan
101111
101111
add a comment |
add a comment |
0
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")
and
$("a.$votedown")
should work
but this is recommended
function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
can i add code here?
– Artis Laizans
Jan 2 at 16:29
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
Please see update.....
– mplungjan
Jan 2 at 16:40
|
show 15 more comments
0
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")
and
$("a.$votedown")
should work
but this is recommended
function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
can i add code here?
– Artis Laizans
Jan 2 at 16:29
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
Please see update.....
– mplungjan
Jan 2 at 16:40
|
show 15 more comments
0
0
0
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")
and
$("a.$votedown")
should work
but this is recommended
function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")
and
$("a.$votedown")
should work
but this is recommended
function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>function setActive($but) {
$(".vote").removeClass("active");
$but.addClass("active")
}
$(".vote").on("click", function(e) {
e.preventDefault();
var $but = $(this);
var params = {
"vote": this.id === "voteup" ? "up" : "down",
"id": $(this).closest("div").attr("id")
};
setActive($but); // remove when ajax is available
console.log("about to vote",params)
$.ajax({
data: params,
url: 'vote.php',
type: 'post',
success: function(response) {
setActive($but);
},
error: function(jxhr) { console.lig("error", jxhr)
}
});
});#voteup.active { background-color: green }
#votedown.active { background-color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
<a id='voteup' class='fas fa-angle-up vote'></a>
<a id='votedown' class='fas fa-angle-down vote'></a>
</div>answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
edited Jan 2 at 17:04
answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
answered Jan 2 at 15:57
mplungjanmplungjan
89.8k22127184
89.8k22127184
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
can i add code here?
– Artis Laizans
Jan 2 at 16:29
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
Please see update.....
– mplungjan
Jan 2 at 16:40
|
show 15 more comments
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
can i add code here?
– Artis Laizans
Jan 2 at 16:29
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
Please see update.....
– mplungjan
Jan 2 at 16:40
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
hmm i don't really understand this if i will not use id ad image id then how should i know for which image like was pressed?
– Artis Laizans
Jan 2 at 16:14
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
i added image id to another div in that div there are a for like and a for dislike and they both have different id's how can i get id of that div after pressing on one of a?
– Artis Laizans
Jan 2 at 16:19
can i add code here?
– Artis Laizans
Jan 2 at 16:29
can i add code here?
– Artis Laizans
Jan 2 at 16:29
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
<div id='$id' class='area-vote'> <a id='1' class='fas fa-angle-up $voteup' onclick='vote("up",this);'></a> <a id='2' class='fas fa-angle-down $votedown' onclick='vote("down",this);'></a> now i need to get id from that area-vote class how to do that?
– Artis Laizans
Jan 2 at 16:31
Please see update.....
– mplungjan
Jan 2 at 16:40
Please see update.....
– mplungjan
Jan 2 at 16:40
|
show 15 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009266%2fmaking-like-button-change-color-after-user-click-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
8
IDs must be unique. Use a class or two different IDs -
$("a.$voteup")and$("a.$votedown")should work– mplungjan
Jan 2 at 15:51
Others would be correct as
ids are meant to be unique.– Drew Reese
Jan 2 at 16:15