Поведение выпадающего меню

Question

Привет! Я работаю над приложением MVC, в котором есть раскрывающееся меню, и элементы этого раскрывающегося списка выбираются из БД через foreach.

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

Я получаю 3 результатаИсходя из этого для каждого (Mobiles-Consoles-Tablets), у меня есть другой 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 s ById, а getElementById.

Подробнее об этом можно прочитать здесь -> Почему дубликаты идентификаторов не разрешены в 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>