Question

我有一个有效的网页，但我想概括一下代码。当用户点击链接时，例如锚＃11或＃12，一个名为＃t11或#t12的div将用这段脚本打开（或关闭）：

脚本

$( "#11" ).click(function() {
$( "#t11" ).toggle();
});

$( "#12" ).click(function() {
$( "#t12" ).toggle();
});

剥离的HTML

<div class="a">
  <table>
    <tr><td><a id="11">Foo</a></td></tr>
    <tr><td>Find out more about Foo</td></tr>
  </table>
</div>
<div class="a">
  <table>
    <tr><td><a id="12">Bar</a></td></tr>
    <tr><td>Find out more about Bar</td></tr>
  </table>
</div>

<div class="b" id="t11">
  <p>More info about Foo</p>
</div>
<div class="b" id="t12">
  <p>More info about Bar</p>
</div>

相关CSS

.b {
  display: none;
}

这很好，然而，超过20个div，它变得复杂和难以维护。有没有办法减少代码，因此<a>中的每个ID都会切换其<div>？我一直在与$this挣扎，但没有我希望的结果。

Answer 1

您可以使用匹配所有相应<a>元素的选择器，以便您的点击功能将应用于所有这些元素。然后，您可以使用id从<a>代码中获取$(this).attr('id')属性。然后，您可以形成一个与要切换的内容的相应ID匹配的选择器，然后使用该选择器调用.toggle()方法。

$('.a table tr td a').click(function() {
  var id = $(this).attr('id');
  var selector = '#t' + id;
  $(selector).toggle();
});

.b {
  display: none;
}
a:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <table>
    <tr>
      <td><a id="11">Foo</a>
      </td>
    </tr>
    <tr>
      <td>Find out more about Foo</td>
    </tr>
  </table>
</div>
<div class="a">
  <table>
    <tr>
      <td><a id="12">Bar</a>
      </td>
    </tr>
    <tr>
      <td>Find out more about Bar</td>
    </tr>
  </table>
</div>

<div class="b" id="t11">
  <p>More info about Foo</p>
</div>
<div class="b" id="t12">
  <p>More info about Bar</p>
</div>

修改

如@Lelio Faieta所述，您也可以考虑在实际的<a>代码中添加一个类。

在上面的示例中，如果html的结构发生变化，$('.a table tr td a')选择器将会中断，点击功能将会丢失。

但是，如果您为每个toggler标记指定了一个类<a>，那么您只需将$('.a table tr td a')选择器替换为$('.toggler')和您的点击功能如果您更改html中<a>标记的位置，它仍然有用。

$('.toggler').click(function() { var id = $(this).attr('id'); var selector = '#t' + id; $(selector).toggle(); });

.b { display: none; } a:hover { cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="a"> <table> <tr> <td><a id="11" class="toggler">Foo</a> </td> </tr> <tr> <td>Find out more about Foo</td> </tr> </table> </div> <div class="a"> <table> <tr> <td><a id="12" class="toggler">Bar</a> </td> </tr> <tr> <td>Find out more about Bar</td> </tr> </table> </div> <div class="b" id="t11"> <p>More info about Foo</p> </div> <div class="b" id="t12"> <p>More info about Bar</p> </div>

Answer 2

您可以使用类对jquery中的元素进行分组。类被引用为id，但带有点而不是破折号：

$('.someClass')

你曾经写过的地方

$('#anID')

许多对象可以共享同一个类，因此您既可以使用类同时将动画定位到多个对象，也可以使用DOM上的不同元素来触发动画

Answer 3

解决此问题的最佳方法是向所有标记添加公共类并使用该类执行事件。

CREATE TABLE

独立于id

3 个答案: