所以我在Div中有一组Span标签,根据选择显示我们的隐藏。例如:
<select id="country" >
<option value="please select"> Please Select </option>
<option value="us"> US </option>
<option value="uk"> UK </option>
<div id=span-group> <span class="uk">$5.00</span <span class="uk">25 Pounds</span> </div>
显示和隐藏这些标记的脚本运行正常......但是稍后在表单处理中我需要重用“span-group”中未隐藏的值。例如:
<span id="reuse">It looks like you would like to spend **<span *set the text here to match the unhidden span tag in "span-group"*> </span>**
如果有一种方法可以通过javascript / jquery执行此操作,那将非常棒,因为我的选择组在“span-group”中有许多选项和潜在值。有任何想法吗?
答案 0 :(得分:0)
您可以使用:visible
选择器过滤可见范围元素:
$('#span-group').find('span:visible');
然后您可以使用each
方法迭代所选元素:
var a = 0;
$('#span-group').find('span:visible').each(function(){
a += parseInt($(this).text(), 10);
});
$('#reuse').text('...' + a);
答案 1 :(得分:0)
您可以尝试使用Jquery可见选择器http://api.jquery.com/visible-selector/。
由于只有一个可见,你可以依靠可见的选择器来返回所需的元素。
答案 2 :(得分:0)
$("#reuse span").text($("#span-group span:visible").text());
有多个#span-group span
元素。这假设您只想将所有这些文本连接在一起。
答案 3 :(得分:0)
这是一个让“重用”文本与“span-group”保持同步的示例。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<select id="country">
<option value="please select"> Please Select </option>
<option value="us">US</option>
<option value="uk">UK</option>
</select>
<div id="span-group">
<span class="us">$5.00</span>
<span class="uk">25 Pounds</span>
</div>
<span id="reuse">It looks like you would like to spend <span id="selectedCurrency"></span>
<script type="text/javascript">
$(function() {
showSelectedCurrency();
$('#country').change(function() {
showSelectedCurrency();
});
});
function showSelectedCurrency() {
var spanToShow = $('#span-group span.' + $('#country').val());
$('#span-group span').hide();
if(spanToShow.length > 0) {
spanToShow.show();
$('#selectedCurrency').text(spanToShow.text());
}
}
</script>
</script>
</body>
如果您不希望“span-group”和“重用”始终保持同步,但您只想在某个时候更新“重用”,则可以使用Vega建议的:visible选择器 - 某些东西像这样:
$('#selectedCurrency').text($('#span-group span:visible').text());