爲什麼我的div不會被.class工作交換？

Basicly了代碼的作用是揭示一個事業部，而隱藏其他。

在原來的版本，它很簡單，因爲在div位置是絕對的。

隨着等級的版本，我需要揭示的基礎上，其「產品規格」的下一個實例DIV的的onClick所在地。

注意/編輯：它們在頁面上相同的類的多個版本。因此，對類的引用必須根據被點擊的鏈接的位置而特定於類的最近實例。

HTML：

<div id="product-details"> 
    <area shape="rect" onClick="swap3('product-details','product-specs');"> 
</div> 
<div id="product-specs"> 
    <p>Content</p> 
</div>

的Javascript：

function swap3(oldDivId, newDivId) { 
    var oldDiv = document.getElementById(oldDivId); 
    var newDiv = document.getElementById(newDivId); 
    oldDiv.style.display = "none"; 
    newDiv.style.display = "block"; 
}

但是現在我需要補充的產品細節多個實例股利&產品規格

新的HTML：

<div class="product-details"> 
    <area shape="rect" onClick="swap3('product- details','product-specs');"> 
</div> 

<div class="product-specs"> 
    <p>Content</p> 
</div> 


<div class="product-details"> 
    <area shape="rect" onClick="swap3('product- details','product-specs');"> 
</div> 
<div class="product-specs"> 
    <p>Content</p> 
</div>

新的JavaScript：

????????

來源

2011-09-10 Philip Kirkbride

注意:(我解釋了完整的代碼，請在here之前，所以只需在這裏更新）請記住，當您的選擇器是className時，您將獲得一個數組！改變這樣的代碼，並再次測試：

function swap3(currentDivId ,oldDivId, newDivId) { 
    var oldDiv = $(currentDivId).nextAll("div." + oldDivId); 
    var newDiv = $(currentDivId).nextAll("div." + newDivId); 
    $(oldDiv).each(function(){ $(this).css({"display" : "none"}); }); 
    $(newDiv).each(function(){ $(this).css({"display" : "block"}); }); 
}

來源

2011-09-10 01:37:47

在本地JavaScript，你會使用getElementsByClassName() - 但它not supported in IE了直通8版，您可以使用一個特製的包裝腳本像this one，或使用像jQuery庫抽象掉瀏覽器的差異。

在jQuery中，嘗試像

function swap(oldClassName, newClassName) { 
    $("'." + oldClassName + "'").hide(); 
    $("'." + newClassName + "'").show();  
}

來源

2011-09-10 01:18:16 Val

我已經在頁面上使用jQuery，所以這不會是一個問題，我已經使用jQuery選擇器做了一些嘗試。以及試圖使用'這個'參考。 –

但是，如果您有多個產品規格實例，則兩者都會顯示該解決方案。我需要一種方法讓腳本知道觸發事件的位置，並只顯示下一個.product-specs實例。 –

啊，這有點多...但如果你可以保證每個'細節'的div立即緊跟其相應的'規格'div，你可以使用兄弟選擇器。 – Val

原文：

function swap3(oldDivId, newDivId) { 
    var oldDiv = document.getElementById(oldDivId); 
    var newDiv = document.getElementById(newDivId); 
    oldDiv.style.display = "none"; 
    newDiv.style.display = "block"; 
}

的jQuery：

function swap3(oldDivId, newDivId) { 
    var $oldDiv = $('#' + oldDivId); 
    var $newDiv = $('#' + newDivId); 
    $oldDiv.hide(); 
    $newDiv.show(); 
}

jQuery的職業：

function swap3(oldDivClass, newDivClass) { 
    var $oldDiv = $('.' + oldDivClass); 
    var $newDiv = $('.' + newDivClass); 
    $oldDiv.hide(); 
    $newDiv.show(); 
}

來源

2011-09-10 01:24:29 Justin808

我喜歡你要去的地方，但它不會按原樣工作，因爲可能有多達5個'newDivClass'實例，我只需要顯示下一個實例，而不是所有其他實例。 –

@PhilipK - 爲每個產品添加一個ID。即使是一個id =「Prod ##」，所以它可以用代碼計算。聽起來你正試圖找出一個特定的產品來顯示/隱藏，這對於課程來說不是很好用。 – Justin808

要隱藏'details'div並顯示緊隨其後的div，假定爲'specs'，請嘗試使用此jQuery代碼片段。它附加一個單擊處理每一個「產品細節」 DIV和火災時，它隱藏該div並顯示其直接兄弟：

$(".product-details").click(function() { 
    $(this).hide(); 
    $(this).next().show(); 
});

反向行爲（隱藏規格和顯示細節）留作爲讀者的練習;-)

來源

2011-09-10 01:35:54 Val

如何指定'product-specs'的下一個實例。 - $（this）.next（.product-specs）.show（）; ？ –

我這麼認爲（你需要在'next（）'調用中加入選擇器參數，比如'next（「。product-specs」）''，如果你只需要傳入一個選擇器到next '不知道下一個div是'.product-specs'div，如果每個'details'div都總是跟着'specs'，那麼不需要將選擇器傳遞給'next（）'。 – Val

實際上，no ：http：//api.jquery.com/next/上的文檔似乎說選擇器被用作next（）的過濾器 - 它總是找到下一個兄弟 - 但只有在它返回時纔會返回如果下一個兄弟不匹配選擇器，它並不會繼續尋找;相反，它不會返回任何東西。如果你不能保證規範總是遵循細節，你可以使用類似' find（）'繼續尋找匹配的div，這看起來很脆弱;如果相應的'spec'div與它的細節有幾個元素，你怎麼知道你有正確的規格？ – Val

別的東西，你可以做的是包裹每個產品一個div裏面沒有任何class和id。它是有道理的，像這樣分組，像

<div>  
    <div class="product-details"> 

     <area shape="rect" onClick="swap3('product- 
details','product-specs');"> 

    </div> 

    <div class="product-specs"> 

     <p>Content</p> 

    </div> 

</div> 

<div> 
    <div class="product-details"> 

     <area shape="rect" onClick="swap3('product- 
details','product-specs');"> 

    </div> 

    <div class="product-specs"> 

     <p>Content</p> 

    </div> 
</div>

注意額外的包裝divs。現在，您可以使用父元素來標識您必須展示的產品規格。例如:(也許有更好的辦法）

$('.product-details').click(function() { 
    // Find the specs to show 
    var $specs = $(this).siblings('.product-specs'); 
    // Hide the other ones 
    $('.product-specs').not($specs).hide(); 
    // Show the one that you want 
    $specs.show(); 
});

希望它的作品！

來源

2011-09-10 01:54:05 julioolvr

爲什麼我的div不會被.class工作交換？

回答

相關問題