Question

我有一张包含不同菜单项的表格。每当用户点击菜单项时，我想要在下面显示说明。我用jQuery做这个，它确实有效。但是，我想知道是否有更好的解决方案可用，因为我的解决方案在很大程度上取决于文档的HTML结构。

我曾想过给每个元素一个id并将其作为目标，但那么我如何用一个函数来定位所有这些不同的id？

到目前为止，这是我的代码：

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>

（或fiddle）

我担心的是这句话：

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

我是否应该更改我的HTML，这可能不再适用了。

Answer 1

正如您所指出的那样：您当前的解决方案依赖于具有给定结构的文档。如果你决定重新安排HTML，JS也需要改变，你想避免这种情况。

一种可能的解决方案是将HTML元素相互关联，如下所示：

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

这样，无论何时单击菜单项，您都可以以编程方式选择相关标签并执行您需要的任何操作：

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

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

greyHeadings.click(function() {
    displayDescription($(this).attr("rel"));
});

Answer 2

你可以通过生成HTML来解决这个问题，这样你就可以得到类似的东西

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

然后您可以使用Javascript：

执行此操作

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

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

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

此解决方案的缺点是您始终在整个DOM中搜索项目。如果需要，您可以缓存已搜索过的项目以加快进程：

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);
});

Answer 3

我认为你可以使用nearest（）

https://api.jquery.com/closest/ ...您将拥有此代码

$(this).closest('.menu-item').next().toggleClass('show-item');

使jQuery代码更少依赖于HTML结构

3 个答案: