1

私はjQueryを初めて使用し、JSをかなり初めて使用し（少し知識があります）、jQueryコードを作成したいと考えています。

まず、ここに私のHTMLコードがあります：

<div id="user-controls">
    <div class="choice" id="choice-all" onclick="showAll();">All</div>
    <div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
    <div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>

<div id="devices">
    <div class="android asus">Nexus 7</div>
    <div class="android htc">One S</div>
    <div class="android htc">One X+</div>
    <div class="android asus">Transformer Prime</div>
    <div class="winph htc">Windows Phone 8X</div>
</div>

次のことを行うjQueryコードが必要です。

  1. #choice-asus DIV をクリックすると、クラスが .htc のすべての DIV が display="none" に設定されます。

  2. #choice-htc DIV をクリックすると、.asus クラスのすべての DIV が display="none" に設定されます。

  3. #choice-all DIV をクリックすると、すべての DIV が display="inline-block" に設定されます (これは、ページが最初に読み込まれたときのデフォルト設定でもあります)。

私はすでに次のコードを試しましたが、何もしません。

$(document).ready(function(){
    $("#choice-htc").click(function(){
        $(".htc").hide();
    })
});

助けてくれてありがとう、ディラン。

4

6 に答える 6

2

非常に多くの選択肢:) http://jsfiddle.net/9RtUE/

    $(function(){
        $("#user-controls").on('click','div',function(){
           var classToShow = this.id.split('-')[1],
               filter = classToShow === "all" ? 'div': '.' + classToShow;
           $("#devices").children().show().not(filter).hide();
         }); 
     });
于 2012-10-25T06:40:28.913 に答える
1

次のコードを試すことができます-

function showAll(){
    $("#devices div").show();
}
function justASUS(){
    $("#devices div").hide();
    $("#devices .asus").show();
}
function justHTC(){
    $("#devices div").hide();
    $("#devices .htc").show();    
}

ここでデモ。

于 2012-10-25T07:00:34.660 に答える
1

簡単で清潔に保つには、このようなソリューションを使用する必要があります

$(function(){
    $('#choice-asus').on('click', function(){
        $('#devices > div:not(.asus)').hide();
    });
});

基本的に、#choice-asusをクリックすると、クラス asus を持たない#devicesのすべてのdiv を非表示にします。

独自のニーズに合わせてこれを拡張/変更できます。さらに、クリック/バインドまたは適用するハンドラーの代わりに jquerys .on() メソッドを使用することをお勧めします。

于 2012-10-25T06:25:20.000 に答える
1 
$(document).ready(function(){
    if($('div').attr('class')=='X')
    {
         $('div').not($(this)).css('display','none');
    }
});
于 2012-10-25T06:28:19.627 に答える
1

jqueryを使ってみる

デモ

$('#choice-all').click(function(){
  $('.htc, .asus').show();
});

$('#choice-asus').click(function(){
  $('.asus').show();
  $('.htc').hide();
});

$('#choice-htc').click(function(){
  $('.htc').show();
  $('.asus').hide();
});
于 2012-10-25T06:15:58.127 に答える
1

デモはこちら

$(document).ready(function(){   
    $(".choice").click(function(){
         $(".android,.winph").hide();
        if($(this).attr("id")=="choice-all"){
            $(".android,.winph").show();
        }else if($(this).attr("id")=="choice-asus"){
            $(".asus").show();
        }else if($(this).attr("id")=="choice-htc"){
            $(".htc").show();
        }
    });
});
于 2012-10-25T06:21:20.963 に答える