1

私はjqueryに非常に慣れていないため、かなり検索しました。値 6、7、8、または 9 が選択されている場合、div(free1a) を表示したいと思います。選択リストから他の値が選択されている場合は、div(free2a) を表示します。以下の私のhtmlで、class="show1"が選択されている場合、div id="free1a"を表示します。class="show2" が選択されている場合は、div id="free2a" を表示します。

誰の入力にも事前に感謝します

HTML:

<select name="quantity" id="community" class="store-qty" data-inline="true">
      <option value="">Select</option>
      <option class="show1" value="6">6</option>
      <option class="show1" value="7">7</option>
      <option class="show1" value="8">8</option>
      <option class="show1" value="9">9</option>
      <option class="show2" value="10">10</option>
      <option class="show2" value="11">11</option>
      <option class="show2" value="12">12</option>
      <option class="show2" value="13">13</option>
      <option class="show2" value="14">14</option>
      <option class="show2" value="15">15</option>
      <option class="show2" value="16">16</option>
      <option class="show2" value="17">17</option>
      <option class="show2" value="18">18</option>
      <option class="show2" value="19">19</option>
      <option class="show2" value="20">20</option>
    </select>

<div id="free1a">Stuff in here...</div>

<div id="free2a">Other stuff in here...</div>

Javascript:

$("#free1a").hide();
$("#free2a").hide();
$("#community").change(function(){
   $("#free1a").show($(this).class()==".show1");
}).change();
$("#community").change(function(){
   $("#free2a").show($(this).class()==".show2");
}).change();
4

4 に答える 4

2

あなたはあなたのhtmlを非常にうまくタグ付けしました。

http://jsfiddle.net/8C8cP/1/

$(function() {
    $('#community').change(function() {
        var option = $(this).find('option:selected');
        $('#free1a').toggle(option.hasClass('show1'));
        $('#free2a').toggle(option.hasClass('show2'));
    }).change();
});​

唯一の紛らわしい部分は.change()最後になります。これは、ページが最初に入るときにイベントをトリガーするためにあります。

于 2012-05-03T04:35:51.810 に答える
0 
$("#community").change(function(){
    var tmp = $(this).find("option:selected");
    if (!tmp.is('.show1,.show2')){
        $("#free1a,#free2a").hide();
        return;
    }
    var isFree1a = tmp.hasClass("show1");
    $("#free1a").toggle(isFree1a);         
    $("#free2a").toggle(!isFree1a);         
}).change();
于 2012-05-03T04:30:29.417 に答える
0

上記の例を使用して、あなたが求めていると思われるものを作成しました。javascript インクルード src を削除したので、テストの際には必ず元に戻してください。http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jsを使用しました

それが役に立てば幸い！

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script src="" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#free1a").hide();
    $("#free2a").hide();

    $("#community").change(function(){

        if(this.value == 6 || this.value == 7 || this.value == 8 || this.value == 9){
            $("#free2a").hide();
            $("#free1a").show();
        }
        else if(this.value == 10 || this.value == 11 || this.value == 12 || this.value == 13){
            $("#free1a").hide();
            $("#free2a").show();
        }
        else{
            $("#free1a").hide();
            $("#free2a").hide();
        }

    }).change();
    $("#community").change(function(){

    }).change();
});

</script>
</head>
<body>
<select name="quantity" id="community" class="store-qty" data-inline="true">
      <option value="">Select</option>
      <option class="show1" value="6">6</option>
      <option class="show1" value="7">7</option>
      <option class="show1" value="8">8</option>
      <option class="show1" value="9">9</option>
      <option class="show2" value="10">10</option>
      <option class="show2" value="11">11</option>
      <option class="show2" value="12">12</option>
      <option class="show2" value="13">13</option>
      <option class="show2" value="14">14</option>
      <option class="show2" value="15">15</option>
      <option class="show2" value="16">16</option>
      <option class="show2" value="17">17</option>
      <option class="show2" value="18">18</option>
      <option class="show2" value="19">19</option>
      <option class="show2" value="20">20</option>
    </select>

<div id="free1a">Stuff in here...</div>

<div id="free2a">Other stuff in here...</div>
</body>
</html>
于 2012-05-03T04:25:30.527 に答える
0

次のような小さなオブジェクトを設定できます

        $(document).ready(function(){
        var free1a = {'value6':true, 'value7':true, 'value8':true, 'value9':true};
        $("#free1a").hide();
        $("#free2a").hide();

        $('#community').change(function(){

            $("#free1a").hide();
            $("#free2a").hide();

            if(free1a['value'+$(this).attr('value')])
                $("#free1a").fadeIn();
            else
                $("#free2a").fadeIn();
        });
    });
于 2012-05-03T04:38:04.707 に答える