縮短我的jQuery

我該如何縮短這個jQuery？我認爲一定有更好的工作方式比這更好！縮短我的jQuery

（裸記住我是新來的jQuery）......因爲我到這個網站的最後一步，並希望它完成:)

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script>

任何幫助或方向將greatt

來源

2012-02-27 Owen O' Neill

您可以發佈您的HTML？由於您正在使用'on'，我們可以假設您正在加載動態內容嗎？ – mrtsherman 2012-02-27 22:36:07

你能分享你的html嗎？ – 2012-02-27 22:36:20

@mrtsherman：他沒有使用'on（）'它應該用於動態元素的方式，所以這個假設是無效的。 – Purag 2012-02-27 22:37:31

您可以使用您的鏈接了一些額外的數據屬性和一個額外的類，使之短一點。

所以我們說你的HTML看起來像這樣：

<div id="white">white</div> 
<div id="v2black">v2black</div> 
<div id="v3black">v3black</div> 

<div id="firstpagename" class="toggle" data-for="white">toggle white</div> 
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div> 
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div>

那麼你的jQuery可以改寫這樣的：

jQuery(function() { 
    $('.toggle').on('click', function() { 
    var id = $(this).attr('data-for'); 
    $('#' + id).toggle(); 
    }); 
});

來源

2012-02-27 22:45:50 koenpeters

這裏我們也可以使用數據函數替代attr，比如'$（this）.data（「for」）'。 jquery在這個對象中查找data-for屬性。 – 2012-02-27 23:08:55

所以看起來我們正試圖重新創建標準的「手風琴」行爲。根據頁面的佈局，如果可能的話封裝您的項目可能會有所幫助。這是一個可能的解決方案，可以讓事情變得開放和結束。 jsFiddle

<div id="white" class="panel"> 
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v2black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v3black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<script> 
jQuery(".tab").on("click", function() { 
    $(this).closest('.panel').find('.content').toggle(); 
}); 
</script>

首先我們凝聚的代碼到一個腳本標籤和一個文檔準備發言，因爲有它在3個只增加膨脹。

然後我就確定選擇$作爲文檔準備回調的參數。 jQuery將懇請它一個參數jQuery所以我們的代碼塊中，我們可以放心地使用$即使我們的代碼塊外有人預留作其他用途。

這裏的.tab通過遍歷到最近的.panel並且返回來控制它們的.content。通過這種方式，相同的行爲可以控制所有3

然而，如果你的「標籤」不能被封裝這樣你可以隨時他們聯想到他們是顯示/隱藏以另一種方式的內容。我們只需要看你的html。

來源

2012-02-27 22:41:10 Sinetheta

#firstpagename！= #white，#secondpagename！=＃v2black等 - >從他的代碼中理解得非常少。基本上，$（this）不是他想要切換的東西。 – 2012-02-27 22:47:34

D'oh，只是認識到，這不會按原樣工作，除非你只想隱藏它而不再顯示它。 ;-)在這種情況下不妨使用'.hide（）'。你會想要包含一些關係（也許切換目標被構造成'next（）'元素），然後使用DOM遍歷。 – 2012-02-27 22:48:07

@GregPettit謝謝，我已經將解決方案更新爲「控件」和「內容」 – Sinetheta 2012-02-27 23:04:48

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 

    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 

    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script>

爲開始。如果您有更多的元素，可能需要通過buttonid要循環<> toggleid地圖：

var map = { 
    "white": "firstpagename", 
    "v2black": "secondpagename", 
    ... 
}; 
for (var toggler in map) 
    makeToggle(toggler, map[toggler]); 
function makeToggle(togglerid, pageid) { 
    var page = $(document.getElementById(pageid)).hide(); 
    $(document.getElementById(togglerid)).click(function() { 
     page.toggle(); 
    }); 
}

來源

2012-02-27 22:43:17 Bergi

縮短我的jQuery

回答

相關問題