下拉菜单项行为

Question

嗨，我正在使用一个带有下拉菜单的MVC应用程序，该下拉菜单中的项目是通过foreach从数据库中获取的。

foreach (Category item in Model.CategoriesV){    
<input type="submit" class="dropdown-item" id="Show" 
value="@item.CategoriesName" name="CategName" />
 }

我从每个（Mobiles-Consoles-Tablets）得到3个结果，我还有一个包含图库的div。 单击下拉菜单中的项目后，便使用此代码隐藏了此图库。 这是图像厨房（我把它放在局部视图中）

<div id="ImageGalleryDiv">
@Html.Partial("_ImageGallery", Model)
</div>

这是单击下拉项列表后用来隐藏图库的脚本。

 <script>
 $(document).ready(function () {
 $('#Show').click(function () {
 $('#ImageGalleryDiv').hide("100");
 });
 });

当我单击“手机”（下拉菜单中的第一个项目）时，一切正常，其他项目均无法正常工作。 任何帮助，将不胜感激。

Answer 1

id应该是唯一的。 那是目的。 唯一标识元素。 您不得在页面上使用重复的id 。 它可能会导致不良行为，就像您现在正在经历的那样。 基本上，jQuery会使用id获得它找到的第一个元素，然后忽略所有其他元素。 同样在普通的javaScript我们没有getElement 的 ById方法，而没有getElementById 。

在此处详细了解-> 为什么HTML中不允许重复的ID

因此，您可以改用类。

另外， class和id应该用小写字母和短划线分隔string-string （如果由多个单词组成），而不是camelCase。

见下面的例子

 const categories = ['Mobiles', 'Consoles', 'Tablets'] categories.forEach(categ => { const input = `<input type="submit" class="dropdown-item show" id="show-${categ}" value=${categ} name=${categ} />` $('#categories').append(input); }); $('.show').click(function() { $('#image-gallery-div').hide("100"); }); 

 #image-gallery-div { height: 100px; background: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="categories"> </div> <div id="image-gallery-div"> </div>