jQuery无法更改div中所有范围的类 [英] jQuery can't change class of all spans inside a div
问题描述
在下面的示例中，如何更改特定h2 <div>内部的所有<span>的类，同时保持单击的内容不变?
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>
我需要在页面中选择特定的h2 <div>.可能还有更多.
I need to select a particular h2 <div> in a page. There may be many more.
success: function(page_data){
// Remove class like, add class no-link
$('.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');
},
推荐答案
在当前代码上下文中编写的答案.还有其他选项，例如其他答案.
Answer written in your present code context. There are other options like other answered.
$(".like").click(function() {
//first option
$(this).parent().siblings().children().css('background-color', 'red');
//second option
$(this).closest('.h2').find('span').not(this).css('color', 'yellow');
});
有两个不同的选项可以访问<span>.我不知道哪个选项会更好.
There are two different options to access <span>. I don't know which option will perform better.
在这里，将.css()方法替换为.addClass()，removeClass()或toggleClass()
Here, replace .css() method with .addClass(), removeClass() or toggleClass()
这篇关于jQuery无法更改div中所有范围的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
