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

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

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

});

但它似乎不起作用

---

我的网站链接是：

似乎这个。$在你的网站上是未定义的。我不知道为什么，试着用jQuery替换$，就像你在顶部做的那样，这样

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

});

---

在你的网站上，$似乎是未定义的。我不知道为什么，试着用jQuery替换$，就像你在顶部做的那样，这样

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

});

---

您正在以“noconflict”样式处理jQuery，因此其中未定义“$”，请将函数更改为：

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

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

---

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

您正在以“noconflict”样式处理jQuery，因此您的“$”没有在其中定义，请将函数更改为：

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

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

---

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

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

---

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

---

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

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

LeapPad 2浏览器
LeapPad浏览器
VTech InnoTab 2
Hello Kitty 7英寸平板电脑
采用安卓4.0的Kurio儿童平板电脑
Tabeo 7英寸儿童平板电脑

表格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 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>

///表内容
///表内容

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

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

LeapPad 2浏览器
LeapPad浏览器
VTech InnoTab 2
Hello Kitty 7英寸平板电脑
采用安卓4.0的Kurio儿童平板电脑
Tabeo 7英寸儿童平板电脑

表格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 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>

///表内容
///表内容

您可以发布一些相关标签的HTML吗？选择器中的2是什么？

#LeapPad 2 Explorer

是元素ID？如果是，那么您在

ID

中就不能有空间。在我的主页上查看源代码可能比复制所有html更容易：）即使我删除ID中的空间，它仍然不起作用。首先，Muthu是对的，ID中没有空间。其次，您到底想显示什么（）？这些表已经可见。您可以发布一些相关标记的HTML吗？选择器中的2是什么？

#LeapPad 2 Explorer

是元素ID？如果是，那么您在

ID

中就不能有空间。在我的主页上查看源代码可能比复制所有html更容易：）即使我删除ID中的空间，它仍然不起作用。首先，Muthu是对的，ID中没有空间。其次，您到底想显示什么（）？这些表已经可见。当我使用此选项时，当我选择一个选项值时，它正在删除我的两个表。啊，好的-我可能没有看到。当我使用此选项时，当我选择一个选项值时，它正在删除我的两个表。啊，好的-我可能没有看到。