0

所以我在一个 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”中有几十个选项和潜在值。有任何想法吗？

4

4 回答 4

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”和“reuse”不断保持同步，但您只想在某个时候更新“reuse”，您可以按照 Vega 先生的建议使用 :visible 选择器 - 如下所示：

$('#selectedCurrency').text($('#span-group span:visible').text());
于 2013-01-21T16:40:50.560 回答
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);
于 2013-01-21T16:32:02.917 回答
0 
$("#reuse span").text($("#span-group span:visible").text());

有多种#span-group span元素。这假设您只想连接所有这些文本。

于 2013-01-21T16:32:20.907 回答
0

您可以尝试使用 Jquery 可见选择器http://api.jquery.com/visible-selector/。

由于只有一个是可见的，因此您可以依靠可见选择器来返回所需的元素。

于 2013-01-21T16:32:16.540 回答