javascript - 在显示 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 并对点击的颜色做出如下 react :

// 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();

    });

});