Nic*_*ick 8 html javascript jquery
我希望标签与单选按钮"热"相关联.我开始使用.siblings()方法实现它.我认为必须有更好的方法.单选按钮上的单击事件如下所示:
$(".RadioButton").click(function(event) {
var questionId = $(this).find('input').attr('name');
var responseId = $(this).find('input').attr('value');
var answerText = displayPopupQuizAnswer($(this));
这非常有效.我希望当用户点击单选按钮旁边的文本标签时执行相同的代码.html看起来像这样:
<div class="answers">
<span class="radiobutton>
<input type="radio" name="answer1"/>
</span>
<span class="answertextwrapper">
<a href="return false">this is the text</a>
</span>
</div>
这是简化但很接近.我想要的是用class ="answertextwrapper"捕获元素上的click事件,即$(".answerwrapper").click
因此,我需要在单击文本时以某种方式引用输入.合理？
有任何想法吗？
Pet*_*ley 30
简单,使用实际的标签元素 ;
当您使用它们时,不仅可以获得良好的可用性,而且它们的单击事件也会绑定到单选按钮的单击事件.换句话说,您不必再执行任何其他jQuery,只需更新您的HTML即可.
这里有它 - 如果你有萤火虫你可以清楚地看到$(this)总是指的是<input>,无论你是否真的点击相应的<label>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$('input.quiz-button').click( function( event )
{
console.log( $(this) );
})
} );
</script>
</head>
<body>
<form id="test" name="tester">
<input class="quiz-button" type="radio" name="answer1" id="answer1"/>
<label for="answer1">this is the text 1</label>
<input class="quiz-button" type="radio" name="answer2" id="answer2"/>
<label for="answer2">this is the text 2</label>
</form>
</body>
</html>
您可以提出某种遍历技术以满足您的需求,但我建议您使用该<label>元素:不仅是语义上正确的方法,您可以添加for属性以将其指回输入字段它是一个标签:
<div class="answers">
<span class="radiobutton>
<input type="radio" name="answer1" id="answer1"/>
</span>
<label class="answertextwrapper" for="answer1">
this is the text
</label>
</div>
然后你的Javascript看起来像这样:
$("span.RadioButton").click(function(event) {
//...
});
需要注意的是很多更好的预先设置的标签名,当你在Javascript中做类选择(详见注释).我也删除了空链接,因为这样做也是一种不好的做法.您应该只在CSS中添加游标声明,如果您想要手牌出现的话.
| 归档时间： |
|
| 查看次数： |
44818 次 |
| 最近记录： |