Question

我一直在我的网站上使用这段jquery代码：

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

});

但它似乎没有起作用？

我的网站链接是：http://mykidstablet.co.uk

Answer 1

你正在以“noconflict”风格处理jQuery，因为你的'$'没有在那里定义，你的功能改为：

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

ready函数将传递给正在使用的jQuery实例。

注意删除了以前添加的ID相关评论。有关详细信息，请参阅其他答案。

Answer 2

不要使用空格，原因很简单，空格字符对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 (".").

Answer 3

似乎这个。$在您的网站上以未定义的形式返回。我不知道为什么，尝试用jQuery代替$，就像你在顶部做的那样......

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

});

Answer 4

消除选择“值”和表格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>

使用jquery隐藏和显示带有选项值的表

4 个答案: