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。 Div以{display：none;}开头，但是我想显示然后使用jquery，这样我就可以只选择其中一个来保持显示。如果这是有道理的。

基本上我要将.data变量设置为div，然后我将选择其中一个并隐藏其余部分。我需要变量，因为除了一个很长的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();

    });

});

在显示div中使用Jquery .data

1 个答案: