0

私は自分のウェブサイトでこのjqueryコードを使用しています：

jQuery(document).ready(function() {
   $('#tablets').change(function() {
    $('#LeapPad 2 Explorer,#VTech InnoTab 2').hide();
    $('#' + $(this).val()).show();
});

});

しかし、それは機能していないようですか？

私のウェブサイトのリンクは: http://mykidstablet.co.uk

4

4 に答える 4

3

「競合しない」スタイルでjQueryを扱っているため、「$」が定義されていないため、関数を次のように変更します。

jQuery(document).ready(function($) {
   $('#tablets').change(function() {
       $('#LeapPad 2 Explorer,#VTech InnoTab 2').hide();
       $('#' + $(this).val()).show();
  })
});

ready 関数には、使用中の jQuery インスタンスが渡されます。

注: ID に関して以前に追加されたコメントを削除しました。詳細については、他の回答を参照してください。

于 2012-11-08T13:49:31.113 に答える
1

スペースを使用しないでください。理由は単純です。スペース文字は ID 属性として有効ではありません。

ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of   letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
于 2012-11-08T13:53:39.047 に答える
0

Select "Value" と Table Id のスペースを削除します。また、ID で非表示にする代わりに、項目テーブルに関連付けられたクラスを非表示にします

JQuery

jQuery(document).ready(function() {
    $('#tablets').change(function() {
        $('.stock-list').hide(); // Hide all Item Tables
        $('#' + $(this).val()).show();
    });
});

HTML を選択

<select id="tablets">
<option value="LeapPad2Explorer">LeapPad 2 Explorer</option>
<option value="LeapPadExplorer">LeapPad Explorer</option>
<option value="VTechInnoTab2">VTech InnoTab 2</option>
<option value="HelloKitty7inchTablet">Hello Kitty 7 inch Tablet</option>
<option value="KurioKidsTabletwithAndroid4.0">Kurio Kids Tablet with Android 4.0</option>
<option value="Tabeo7inchKidsTablet">Tabeo 7 inch Kids Tablet</option>
</select>

テーブル HTML

<table class="stock-list tablesorter" id="LeapPad2Explorer" border="0" cellpadding="0" cellspacing="0" width="100%">
///Table Content
</table>

<table class="stock-list tablesorter" id="VTechInnoTab2" border="0" cellpadding="0" cellspacing="0" width="100%">
///Table Content
</table>
于 2012-11-08T13:58:07.650 に答える
0

this.$ が Web サイトで undefined として戻ってくるようです。理由はわかりませんが、上部で行ったように $ を jQuery に置き換えてみてください...

jQuery(document).ready(function() {
jQuery('#tablets').change(function() {
jQuery('#LeapPad 2 Explorer,#VTech InnoTab 2').hide();
jQuery('#' + jQuery(this).val()).show();
});

});
于 2012-11-08T13:48:59.000 に答える