Javascript 单击单选按钮时更改文本
我在同一页上多次列出了以下代码,我希望在单击单选按钮时能够在foo title span元素中显示数据名值。问题在于,由于.foo title span多次位于DOM中,因此文本到处都在更新,而不是在1处。我尝试了几种方法,如.parent().closest。prev()但我想不出来 标签的样式是背景图像,文本是隐藏的,这就是为什么我想做上面的工作,向用户显示一些文本信息的原因 HTMLJavascript 单击单选按钮时更改文本,javascript,jquery,Javascript,Jquery,我在同一页上多次列出了以下代码,我希望在单击单选按钮时能够在foo title span元素中显示数据名值。问题在于,由于.foo title span多次位于DOM中,因此文本到处都在更新,而不是在1处。我尝试了几种方法,如.parent().closest。prev()但我想不出来 标签的样式是背景图像,文本是隐藏的,这就是为什么我想做上面的工作,向用户显示一些文本信息的原因 HTML <div class="col-sm-4"> <p class="foo-tit
<div class="col-sm-4">
<p class="foo-title">
<span></span>
</p>
<ul class="foo-container-list">
<li class="foo-list-item">
<input class="foo-input" data-name="red" id="foo_id_1" name="foo_id" type="radio" value="1">
<label for="foo_id_1">red</label>
</li>
<li class="foo-list-item">
<input class="foo-input" data-name="green" id="foo_id_2" name="foo_id" type="radio" value="2">
<label for="foo_id_2">green</label>
</li>
<li class="foo-list-item">
<input class="foo-input" data-name="blue" id="foo_id_3" name="foo_id" type="radio" value="3">
<label for="foo_id_3">blue</label>
</li>
</ul>
</div>
fooBar.updateFooName = function(foo) {
var fooName = foo.data('name');
if (fooName) {
$('.foo-title span').text(fooName);
}
};
$(document).ready(function() {
$("input[name=foo_id]:radio").change(function() {
fooBar.updateFooName($(this));
});
});
fooBar.updateFooName = function() {
var fooName = $(this).data('name');
if (fooName) {
$(this).closest('[class^="col-sm"]').find('.foo-title span').text(fooName);
}
};
$(document).ready(function() {
$("input[name=foo_id]:radio").change(fooBar.updateFooName);
});