Question

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

Answer 1

您可以使用: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);

Answer 2

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

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

Answer 3

$("#reuse span").text($("#span-group span:visible").text());

有多个#span-group span元素。这假设您只想将所有这些文本连接在一起。

Answer 4

这是一个让“重用”文本与“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());

根据显示/隐藏范围标签组/ Javascript设置范围文本？

4 个答案: