javascript - 独立于 id 的 jQuery 操作

Question

我有一个工作网页，但我想概括代码。当一个人点击一个链接时，例如 anchor #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 就会变得复杂且难以维护。有没有办法减少代码，这样每个id都在<a>中将切换其 <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>

编辑

您还可以考虑向您的实际 <a> 添加一个类标签，正如 @Lelio Faieta 提到的。

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

但是，如果您分配一个类，例如 toggler给每个<a>标签，那么你只需替换$('.a table tr td a')即可选择器 $('.toggler')如果您更改 <a> 的位置，您的点击功能仍然有效。 html 中的标签。

$('.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>