根据显示/隐藏span标记/Javascript组设置span文本

Set span text based on group of show/hide span tags/Javascript?

本文关键字：span 设置 文本 Javascript 标记 隐藏 显示      更新时间：2023-09-26

所以我在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组"中有几十个选项和潜在值。有什么想法吗？

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

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

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

存在多个#span-group span元素。这假设您只想将它们的文本连接起来。

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

下面是一个保持"重用"文本与"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>

如果你不想让"跨度组"answers"重用"保持同步，但只想在某个时候更新"重用"，你可以像维加先生建议的那样使用：可见选择器，比如这样：

$('#selectedCurrency').text($('#span-group span:visible').text());
相关文章：