2012-07-22 57 views
2

我目前使用下面的切換多個div的,但我想知道如果我可以將所有這些合併成一個?結合jQuery代碼的多個實例

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tvehicle").click(function() { 
     $("#div7").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tvehicle2").click(function() { 
     $("#vehicle2").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tproperty").click(function() { 
     $("#div8").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#thproperty1").click(function() { 
     $("#hproperty1").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#thproperty2").click(function() { 
     $("#hproperty2").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#thproperty3").click(function() { 
     $("#hproperty3").toggle(); 
    }); 
}); 
</script> 
+4

使用類,盧克。 – zerkms 2012-07-22 10:57:35

+0

@Legs可以發佈你的HTML結構嗎? – 2012-07-22 11:05:58

+0

@DavidBarker HTML有很多敏感的工作內容,但是我會將其刪除並替換爲其他內容,並在發生時發佈它 – Legs 2012-07-22 11:24:22

回答

1
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#tvehicle").click(function(){ 
    $("#div7").toggle(); 
}); 

$("#tvehicle2").click(function(){ 
$("#vehicle2").toggle(); 
}); 

//AND SO ON... 

}); 
</script> 

你可以把所有的功能在一個單一的document.ready功能。像上面:)...你也不必爲每個功能都有新的<script>標籤。

+0

我剛刪除了100行代碼!謝謝!! – Legs 2012-07-22 11:06:04

+0

您可以刪除更多靜止腿,這是一個很好的答案,但您應該對HTML結構進行一些其他更改,以便進一步減少它。 – 2012-07-22 11:06:51

1

類添加到所有的div,如:

<div id="tvehicle2" class="toggleable"> ... </div> 

那麼你可以做:

$(".toggleable").click(function() { 
    $(this).toggle(); 
}); 

如果你不想(或不能)一類添加到所有可切換項目,還可以在選擇器中組合多個id參考:

$('#tvehicle1, #tvehicle2, #tv3').click(function() { 
    $(this).toggle(); 
}); 
+0

在上面的例子中,我將如何指定每個id-reference要切換的div? – Legs 2012-07-22 11:26:01

+0

它會切換你點擊的那個 - 它綁定到事件處理程序裏面的「this」(只有那個)。 – thebjorn 2012-07-22 11:27:53

+0

對不起,我看到你的問題是..切換的項目不同於被點擊的項目。他們是否有任何dom關係,例如是一個包含在/旁邊的其他? – thebjorn 2012-07-22 11:31:06

0

您可以使用數據屬性指定要將哪個元素oggle。 example

$(document).ready(function(){ 
var toggler = function() { 
    var toToggle = $(this).data().toggleId; //Id of an element to toggle 

    $("#" + toToggle).toggle();   
}; 

$(".togglers").on("click", ".toggler", toggler); 
}); 

HTML結構

<div class="togglers"> 
<div class="toggler" data-toggle-id="to-toggle-1">Click to toggle 1</div> 

<div class="to-toggle" id="to-toggle-1">I will be toggled #1</div> 

<div class="toggler" data-toggle-id="to-toggle-2">Click to toggle 2</div> 

<div class="to-toggle" id="to-toggle-2">I will be toggled #2</div> 

<div class="toggler" data-toggle-id="to-toggle-3">Click to toggle 3</div> 

<div class="to-toggle" id="to-toggle-3">I will be toggled #3</div> 
</div>​ 

+0

你應該在你的答案中包含小提琴中的大量代碼。 – millimoose 2012-07-22 11:32:51

+0

數據屬性:http://ejohn.org/blog/html-5-data-attributes/ ..和jQuery http://api.jquery.com/data/ – thebjorn 2012-07-22 11:37:08

+0

175行已經變成了9!非常感謝! – Legs 2012-07-22 12:18:51