Mam stół z różnymi elementami menu. Za każdym razem, gdy użytkownik kliknie element menu, chcę pojawić się opis poniżej. Robię to z jQuery i działa. Zastanawiam się jednak, czy dostępne jest lepsze rozwiązanie, ponieważ moje rozwiązanie zależy w dużym stopniu w strukturze HTML dokumentu.

Myślałem o dając każdemu elemencie ID i docelowałem w ten sposób, ale w jaki sposób skierowałem się do wszystkich tych różnych identyfikatorów z jedną funkcją?

Oto mój dotychczasowy kod:

var greyHeadings = $('.menu-item');

function displayDescription(event) {
  $(event.target).parent().next().children().toggleClass('show-item');
}

greyHeadings.click(function() {
  displayDescription(event);
});
table { width: 100% }

.description {
  display: none;
  font-size: 13px;
}

.show-item {
  display: block !important;
  color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="table-header"><a name="boodlefight">Boodle Fight</a></th>
    <th class="table-header">Price</th>
  </tr>
  <tr class="menu-item">
    <td class="tablesubhead">Silogan <span class="click-for-description">click on me for a description</span></td>
    <td class="prices">135 AED</td>
    <td class="add addselected">+</td>
  </tr>
  <tr>
    <td class="description">Beef Tapa, Longanisa, Chicken Tocino, Scrambled Egg, Daing Na Bangus, Pancit Guisado, Itlog Malat with Insaladang Talong, Garlic Rice, Dessert: Pandan Jelly or Banana Turon. All with cups of Coffee</td>
  </tr>
  <tr class="menu-item">
    <td class="tablesubhead">Isdaan <span class="click-for-description">click on me for a description</span></td>
    <td class="prices">195 AED</td>
    <td class="add addselected">+</td>
  </tr>
  <tr>
    <td class="description">Beef Tapa, Longanisa, Chicken Tocino, Scrambled Egg, Daing Na Bangus, Pancit Guisado, Itlog Malat with Insaladang Talong, Garlic Rice, Dessert: Pandan Jelly or Banana Turon. All with cups of Coffee</td>
  </tr>
</table>

(lub jako Fiddle)

Mój zmartwienie jest z tą linią:

$(event.target).parent().next().children().toggleClass('show-item');

Czy powinienem zmienić mój HTML, może już nie pracować.

2
user74843 28 czerwiec 2017, 11:03

3 odpowiedzi

Najlepsza odpowiedź

Jest to, jak zauważyłeś: Twoje obecne rozwiązanie opiera się na dokumencie o danej strukturze. Jeśli zdecydujesz się zmienić HTML, JS musiałby również zmienić, a chcesz tego uniknąć.

Możliwe rozwiązanie byłoby powiązanie elementów HTML jeden na inny, jak:

<a href="/my/menu/item" class="menu-item" rel="menuitem-1">Clicky</a>
<!-- some HTML -->
<div id="menuitem-1">Description</div>

W ten sposób, gdy element menu jest kliknięty, możesz programowo wybrać powiązany znacznik i zrobić wszystko, czego potrzebujesz:

var greyHeadings = $('.menu-item');

function displayDescription(id) {
    $(id).toggleClass('show-item');
}

greyHeadings.click(function() {
    displayDescription($(this).attr("rel"));
});
3
mingos 28 czerwiec 2017, 08:13

Myślę, że możesz użyć najbliższych ()

https://api.jquery.com/closest/... będzie miał ten kod

$(this).closest('.menu-item').next().toggleClass('show-item');
0
Lajos Arpad 28 czerwiec 2017, 08:59

Możesz to rozwiązać, generowanie HTML, abyś miał coś takiego

  <tr class="menu-item" data-index="5">
    <td class="tablesubhead">Silogan <span class="click-for-description">click on me for a description</span></td>
    <td class="prices">135 AED</td>
    <td class="add addselected">+</td>
  </tr>
  <tr data-index="5">
    <td class="description">Beef Tapa, Longanisa, Chicken Tocino, Scrambled Egg, Daing Na Bangus, Pancit Guisado, Itlog Malat with Insaladang Talong, Garlic Rice, Dessert: Pandan Jelly or Banana Turon. All with cups of Coffee</td>
  </tr>

A potem możesz to zrobić za pomocą JavaScript:

var greyHeadings = $('.menu-item');

function displayDescription(event) {
  $("[data-index=" + $(event.target).data("index") + "]").toggleClass('show-item');
}

greyHeadings.click(function() {
  displayDescription(event);
});

Wadą tego rozwiązania jest to, że zawsze szukasz przedmiotów w całym domu. Możesz pamięć podręczną, które zostały już przeszukiwane w razie potrzeby, aby przyspieszyć proces:

var indexCache = {};
var greyHeadings = $('.menu-item');

function displayDescription(event) {
  var index = $(event.target).data("index");
  if (!indexCache[index]) {
      indexCache[index] = $("[data-index=" + index + "]");
  }
  indexCache[index].toggleClass('show-item');
}

greyHeadings.click(function() {
  displayDescription(event);
});
0
Lajos Arpad 28 czerwiec 2017, 08:37