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

似乎 this.$ 在您的网站上以未定义的形式返回。我不知道为什么，试着用 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 回答
0

Eliminate the spaces in the Select "Value" and the Table Id's , Also, Instead of hiding by ID, hide the class attached to the item tables

JQuery

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

Select 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>

Table 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 回答