jQuery can't change class of all spans inside a div
In the following example, how can I change the class of all the <span>
that are inside a particular h2 <div>, while leaving the one that was
clicked unchanged?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar voting thingy</title>
<style type="text/css">
.hide {
display: none;
}
.no-like {
color: blue;
}
</style>
<script type="text/javascript"
src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(function() {
$(".like").click(function() {
var hasLike = $(this).data("id");
var data = 'id='+hasLike;
console.log($(this).data('id'));
if(hasLike) {
// ajax call
$.ajax({
type:"GET",
url:"demo.php",
data:data,
beforeSend:function(html){
// We'll think of something to do here
},
success: function(page_data){
// Remove class like, add class no-like
$('.like[data-id="'+page_data+'"]').removeClass('like').addClass('no-like');
//Change the class for all other like links other than
the one the user clicked
//Hard coded for this example
$('.h2[data-id="9"]').siblings('.like').removeClass('like').addClass('hide');
},
error: function(yikes){
//To do later
},
});
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div class="h1" data-id="1">Teachers</div>
<div class="h2" data-id="2">Who is your favorite Math teacher?
<div>* Homer Simpson   <span class="like" data-id="3"
data-sec="2">Like</span></div>
<div>* Elmer Fudd   <span class="like" data-id="4"
data-sec="2">Like</span></div>
<div>* Bugs Bunny   <span class="like" data-id="5"
data-sec="2">Like</span></div>
<div>* Obelix   <span class="like" data-id="6"
data-sec="2">Like</span></div>
<div>* Mojo Jojo   <span class="like" data-id="7"
data-sec="2">Like</span></div>
</div>
<br>
<div class="h1" data-id="8">Restaurants</div>
<div class="h2" data-id="9">Which is your favourtie restaurant in
town?
<div>* McDonalds   <span class="like"
data-id="10" data-sec="9">Like</span></div>
<div>* KFC   <span class="like"
data-id="11" data-sec="9">Like</span></div>
<div>* The Heart Attack Grill   <span class="like"
data-id="12" data-sec="9">Like</span></div>
<div>* In-n-Out   <span class="like"
data-id="13" data-sec="9">Like</span></div>
<div>* Popeye's   <span class="like"
data-id="14" data-sec="9">Like</span></div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment