切換多個隱藏元素的一種功能？

這只是一個片段，但我會在頁面上有很多不同的鏈接。每個鏈接都會有一個不同的隱藏元素與之相關聯。我試圖避免爲每個鏈接編寫100個不同的slideToggle語句來調出各自的隱藏元素。這是近在咫尺嗎？切換多個隱藏元素的一種功能？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<link href='favicon.ico' rel='icon' type='image/jpg'/> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

</head> 

<script type="text/javascript" src="jquery.js"> 
</script> 
<style type="text/css"> 
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif; 
} 
.countystats{ 
    background-color:blue; 
    display:none; 
} 



</style> 

<script type="text/javascript"> 
$('.county').click(function(){ 
      $(this).find('.countystats').slideToggle('fast') 
      }); 
</script> 




<a class="county" href="javascript:;" >one</a><br/> 
<a class="county" href="javascript:;"> two</a> 
</div> 
<div class="countystats">stats one</div> 
<div class="countystats">stats two</div> 
<br /> 
<br/> 
</body></html>

我想的鏈接「一」來顯示DIV統計中的排名一個「和鏈接「二」顯示「統計兩個」股利。提前致謝。

來源

2011-03-16 wootscootinboogie

你可以使用：

$('.county').click(
    function(){ 
     var thisIs = $(this).index(); 
     $('.countystats').eq(thisIs).slideToggle(300); 
    });

JS Fiddle demo。

請注意，我從html中刪除了br以準確獲取index()。如果您需要a元素是一個每行，使用：

a { 
    display: block; 
}

參考文獻：

來源

2011-03-16 15:23:14

完美，謝謝！ – wootscootinboogie 2011-03-16 15:26:04

@ramblinman：如果這對你有用，請隨時投票和/或接受:) – 2011-03-16 15:26:50

良好的實施，唯一的缺點是它需要鏈接和div的順序完全相同。只要這是保證這應該工作正常。 – 2011-03-16 15:31:47

您理想情況下需要一種方法將鏈接鏈接到正確的div。你可以使用像這樣的數據屬性來做到這一點。

HTML：

<a class="county" data-divId="stats1" href="#">one</a><br/> 
<a class="county" data-divId="stats2" href="#">two</a> 
<div id="stats1" class="countystats">stats one</div> 
<div id="stats2" class="countystats">stats two</div>

JS：

$('.county').click(function() { 
    $('#' + $(this).data('divId')).slideToggle(); 
});

示例 - http://jsfiddle.net/infernalbadger/6wDf9/

這應該是很容易做到，如果你是動態生成這些鏈接。

來源

2011-03-16 15:27:30

您可以使用下面給定的切換函數切換多個元素，使元素ID數組成爲輸入。

例如：

 toggleElements(["elem1","elem2"],["elem3"]); 
    OR 
    toggleElements(arr1,arr2);

function showElements(showEls){ 
     for(var i=0; i<showEls.length; i++){ 
      if($("#"+showEls[i]).is(':hidden')) $("#"+showEls[i]).show(); 
     } 
} 
function hideElements(hideEls){ 
     for(var i=0; i<hideEls.length; i++){ 
      if($("#"+hideEls[i]).is(':visible')) $("#"+hideEls[i]).hide(); 
     } 
} 

function toggleElements(arr1,arr2){ 
     if(true){ 
      if($("#"+arr1[0]).is(":hidden")){ 
       showElements(arr1); 
       hideElements(arr2); 
      }else{ 
       showElements(arr2); 
       hideElements(arr1); 
      } 
     } 
}

來源

2011-10-07 08:42:43

切換多個隱藏元素的一種功能？

回答

相關問題