Question

嗨，我正在开发一个MVC应用程序，该应用程序中有一个下拉菜单，通过下拉菜单从数据库中获取该下拉列表中的内容。

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

我从中分别获得3个结果（移动设备-控制台-平板电脑），我还有另一个包含图片库的div。单击下拉菜单中的项目后，便使用此代码隐藏了此图库。这是图像厨房（我把它放在局部视图中）

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

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

<script type="text/javascript">
function loginCheck() {
  var u = document.forms["form1"]["u1"].value;
  var p = document.forms["form1"]["p1"].value;
  //alert(u);
  //alert(p);
  if (u == "us1" && p == "pa1") {
    document.getElementById("n").disabled = false;
    return true;
  }else {
    alert("Invalid credentials");
    return false;
  }
}

</script>
<form name = "form1" method = "post" onsubmit="return loginCheck()">
Username: <input type = "text" name = "u1" size = "20"><br><br>
Password: &nbsp;<input type = "password" name = "p1" size = "20"><br><br>
<input type = "submit" value = "Login"><br><br>
Enter name: <input id="n" type = "text" name = "n" size = "20" disabled = "true"> 
</form>

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

Answer 1

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

在此处详细了解-> Why are duplicate ids not allowed in HTML

因此您可以改用类。

此外，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>

下拉菜单项行为

1 个答案: