根據顯示/隱藏span標籤/ Javascript組設置span文本？

所以我有一個分區內的Span標籤組顯示我們的皮膚基於選擇。例如：根據顯示/隱藏span標籤/ Javascript組設置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 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來做到這一點，因爲我的選擇組有幾十個的「跨組」中選擇及潛在值。這將是巨大的。有任何想法嗎？

來源

2013-01-21 Sam

可以使用:visible選擇過濾可見span元素：

$('#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-21 16:32:02 undefined

您可以嘗試使用jQuery可見選擇，http://api.jquery.com/visible-selector/ 。

由於只有一個可見，您可以依賴可見選擇器返回所需的元素。

來源

2013-01-21 16:32:16

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

有多個#span-group span元素。這假定你只是想把所有的文本連接起來。

來源

2013-01-21 16:32:20

下面是一個使「重用」文本與「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>

如果你不想「跨組」和「再利用」也不斷地保持同步，但你只是想更新「重用」在某些時候，你可以使用：可見如Vega先生建議的選擇器 - 如下所示：

$('#selectedCurrency').text($('#span-group span:visible').text());

來源

2013-01-21 16:40:50 clav

根據顯示/隱藏span標籤/ Javascript組設置span文本？

回答

相關問題