2

これは私が試しているコードです -

DIVS-

<div id="showdiv16" style="display:none;">...</div>
<div id="showdiv17" style="display:none;">...</div>
<div id="showdiv18" style="display:none;">...</div>
<div id="showdiv19" style="display:none;">...</div>

今、値16,17、18,19を取得するドロップダウンメニューがあります

このドロップダウン メニューで、次のように onchange メソッドを呼び出します。

<select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" >

そして、私の JavaScript 関数は -

<script type="text/javascript">
function showSelected( sapna )
{

    var myDivs = new Array(16,17,18,19); 
    for(var i=0; i<myDivs.length; i++) 
    {
        if(myDivs[i] == sapna)
        {
            var divtoshow = 'showdiv'+sapna;
            document.getElementById('showdiv'+sapna).style.display = "block";
        }
        else
        {
            document.getElementById('showdiv'+myDivs[i]).style.display = "none";
        }
    }

    return false;
}
</script>

この表示/非表示の div 効果を実現する方法を教えてください。

4

5 に答える 5

3

これがjQueryではなくjavascriptとしてタグ付けされていることは知っていますが、jQueryを使用してこれを行うのは非常に簡単なので、ここに例を示します.

$('#category').on('change click', function() {
    $('div').hide();
    $('#showdiv' + this.value).show();
});

jsFiddle の作業: http://jsfiddle.net/UBsp9/

于 2012-05-25T05:01:33.037 に答える
2

私の最初の推測は、選択ボックスからの文字列結果を myDivs 配列の整数と比較しようとしているということです。

元のコードに一致するいくつかのバニラ js を次に示します (ただし、jquery などの JS ライブラリを使用すると、多くの頭痛の種を大幅に節約できるため、調べてみることをお勧めします)。

function showSelected(sapna)
{
    var myDivs = new Array(16,17,18,19);
    for(var i=0; i<myDivs.length; i++)
    {
        document.getElementById('showdiv'+myDivs[i]).style.display = (myDivs[i] == parseInt(sapna)) ? 'block' : 'none';
    } // end for i in myDivs.length
} // end function showSelected​​

そしてjsフィドル：http://jsfiddle.net/Wyedr/1/

于 2012-05-25T05:07:41.703 に答える
2

はるかjQueryに簡単でクリーンですが、これをJavaScript以下に示します。

<html>
<head>
<title>test</title>
<style type="text/css">
    div{height:50px;width:200px;text-align:center;
        vertical-align:middle;border:1px dotted green;
        background-color:khaki;}
</style>
</head>
<body>
    <select id="test" onchange="showSelected(this.value)">
        <option value="-1" selected="selected">select</option>
        <option value="16">cat 16</option>
        <option value="17">cat 17</option>
        <option value="18">cat 18</option>
        <option value="19">cat 19</option>
    </select>

    <div id="showdiv16" style="display:none;">16</div>
    <div id="showdiv17" style="display:none;">17</div>
    <div id="showdiv18" style="display:none;">18</div>
    <div id="showdiv19" style="display:none;">19</div>

</body>
<script type="text/javascript">
    var myDivs = new Array(16, 17, 18, 19);

    function showSelected(sapna) {
        var t = 'showdiv' + sapna,
            r, dv;
        for (var i = 0; i < myDivs.length; i++) {
            r = 'showdiv' + myDivs[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'block';
                } else {
                    dv.style.display = 'none';
                }
            }
        }
        return false;
    }
</script>
</html>
于 2012-05-25T05:23:40.723 に答える
0

jquery を使用できる場合は、次のようなことができます。

<div id="showdiv16" class='targets' style="display:none;">Div 16</div>
<div id="showdiv17" class='targets' style="display:none;">Div 17</div>
<div id="showdiv18" class='targets' style="display:none;">Div 18</div>
<div id="showdiv19" class='targets' style="display:none;">Div 19</div>

<select name="category" id="category">
    <option value=''>Select</option>
    <option value='16'>16</option>
    <option value='17'>17</option>
    <option value='18'>18</option>
    <option value='19'>19</option>
</select>

そしてここにjqueryがあります

$(function(){
    $('#category').change(function(){
        var divToShow = $(this).val();
        $('.targets').hide();
        $('#showdiv' + divToShow ).show();
​    });
})

ここで動作するデモを確認できますhttp://jsfiddle.net/H9cvZ/35/

于 2012-05-25T05:04:26.907 に答える
0

これを試すこともできます

サンプル コードについては、この JSFiddle を確認してください

于 2012-05-25T05:17:20.897 に答える