在顯示div中使用jquery .data

Question

好吧，我試圖創建一個使用jquery選擇div的平滑外觀顏色。

我有HTML：

   <div id="firstSelect"><p onclick="displayFirst()">Colour</p> 
       <div id="firstSelectDiv"> 
        <div id="beigeDiv">Beige 
        </div> 
        <div id="brownDiv">Brown 
        </div> 
        <div id="creamDiv">Cream 
        </div> 
        <div id="whiteDiv">White 
        </div> 
        <div id="greyDiv">Grey 
        </div> 
        <div id="blackDiv">Black 
        </div> 
        <div id="redDiv">Red 
        </div> 
        <div id="blueDiv">Blue 
        </div> 
        <div id="greenDiv">Green 
        </div> 
        <div id="stripedDiv">Striped 
        </div> 
        <div id="patternedDiv">Patterned 
        </div> 
       </div> 
      </div> 

和代碼：

function displayFirst(){ 
$('#beigeDiv').data('display', 'true'); 
$('#brownDiv').data('display', 'true'); 
$('#creamDiv').data('display', 'true'); 
$('#whiteDiv').data('display', 'true'); 
$('#greyDiv').data('display', 'true'); 
$('#blackDiv').data('display', 'true'); 
$('#redDiv').data('display', 'true'); 
$('#blueDiv').data('display', 'true'); 
$('#greenDiv').data('display', 'true'); 
$('#stripedDiv').data('display', 'true'); 
$('#patternedDiv').data('display', 'true'); 
if(?not sure?){ 
} 

}

接着我需要使用分配給該元件要顯示的數據的div。 Divs最初是{display：none;}，但我想用jquery顯示，然後我只能選擇其中的一個來保持顯示。如果那有意義的話。

基本上，我將爲div設置一個.data變量，然後我將選擇其中一個並隱藏其餘部分。我需要這個變量，因爲除了一個很長的javascript函數之外，沒有辦法設置它們的顯示方式。任何人都可以協助將函數中的變量用於顯示元素。我有點新，卡住了。

編輯：我應該補充我非常瞭解jquery，這個網站是我第一次深入研究它。要溫柔。

Answer 1

，你可以這樣做：

https://jsfiddle.net/a3aLue2t/

// tell jquery to wait for the webpage to finish loading 
$(document).ready(function(){ 

    // select all the divs with a color inside 
    var colors = $('#firstSelectDiv > div'); 

    // when a color is clicked... 
    colors.click(function(){ 

     // hide all the colors 
     colors.hide(); 

     // make sure the clicked color is still visible 
     $(this).show(); 

    }); 

}); 

編輯：如果您想先隱藏自己的顏色列表中，那麼你可以這樣做：

https://jsfiddle.net/ezktjts3/1/

化妝確定你有這個CSS來隱藏你的firstSelectDiv div：

#firstSelectDiv { 
    display: none; 
} 

，並可以顯示div和反應，被點擊的顏色如下：

// tell jquery to wait for the webpage to finish loading 
$(document).ready(function(){ 

    // select all the divs with a color inside 
    var colors = $('#firstSelectDiv > div'); 

    // show your colors when "Color" is clicked on the webpage 
    $('#firstSelect p').click(function(){ 
     colors.show(); 
     $('#firstSelectDiv').css('display', 'block'); 
    }); 

    // when a color is clicked... 
    colors.click(function(){ 

     // hide all the colors 
     colors.hide(); 

     // make sure the clicked color is still visible 
     $(this).show(); 

    }); 

});