jQuery选择器故障
jQuery selector trouble
我在一个页面中有一堆微笑,点击时必须选择。我尝试实现一个基于jquery的解决方案,但在这个阶段被卡住了,因为选择了多个微笑:
<div class="smiles_feed">
<input type="text" id="rating" value="" name="rating" class="displaynone" />
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="awesomesmile" class="unselected" value="Awesome" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Yummy!</div>
</div>
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="goodsmile" class="unselected" value="Good" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Good!</div>
</div>
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="okaysmile" class="unselected" value="Okay" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Okay!</div>
</div>
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="yucksmile" class="unselected" value="Yuck" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Yuck!</div>
</div>
</div>
<script type='text/javascript'>
$(function(){
// Smile Click Function
$('div.smiles_feed :button').click(function(){
$(this).removeClass('unselected').addClass('selected');
$(this).siblings().removeClass('selected').addClass('unselected');
$('#rating').val($(this).val());
//alert($('#rating').val());
});
});
</script>
我做错了什么?如何更改javascript函数使其只选择一个笑脸?
click()
函数中的$(this)
指的是被单击的按钮,而不是被单击的div。您需要将selected
类添加到$(this).parent()
中siblings()
返回的元素不是表示其他表情符号的div,而是该表情符号的其他元素(在本例中为div.smiletitle
)
要获得其他微笑符号的列表,您应该查看$(this).parent().siblings()
。
如果你的按钮代表了微笑,那么你应该遍历其他的微笑,如下所示:
$(this).parent().siblings().children('button')
并使他们每个人都被取消选择:
$(this).parent().siblings().children('button').each(function(){
$(this).removeClass('selected')
.addClass('deselected');
});
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery最近父级的数据属性选择器
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- jquery IE7中的第n个选择器
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何将返回的值应用于多个不同位置的多个选择器
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- jQuery选择器故障
- jQuery高级选择器故障
- Mootools选择器故障