javascript - 运行 jQuery 函数 onclick

Question

所以我实现了一些 jQuery，基本上通过由 <a> 激活的 slider 来切换内容标签。现在考虑它，我宁愿让持有链接的 DIV 成为链接本身。

我正在使用的 jQuery 在我的脑海中看起来像这样:

<script type="text/javascript">
function slideonlyone(thechosenone) {
 $('.systems_detail').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(600);
      }
 });
}
</script>

我将其用作索引类型框，因此当您单击 <a> 时会出现多个产品。标签曾经是图像*，它会在其下方呈现一些描述产品详细信息的内容:

<div class="system_box">
  <h2>BEE Scorecard database</h2>
  <p>________________</p>
  <a href="javascript:slideonlyone('sms_box');"></a>
</div>

产品详细信息包装在这个 div 中。

<div class="systems_detail" id="sms_box">
</div>

因此，当您单击曾经是图像的内容时*，它将运行 slideonlyone('div_id_name') 函数。上面的函数然后首先关闭所有其他类名为“system details”的 div，然后打开/滑动带有传递给 slideonlyone 函数的 id 的 div。这样您就可以切换产品详细信息，而不是一次全部显示。

注意我只保留了 <a>标签向您展示其中的内容，我将摆脱它。

注意:我的想法是将整个 div 包装在 <a> 中标记，但这是好的做法吗？

所以现在我想知道的是，既然您需要 JavaScript 来在 div 标签上运行 onclick，您如何编写它以便它仍然运行我的 slideonlyone 函数？

Answer 1

使用 obtrusive JavaScript (即内联代码)如您的示例所示，您可以使用 onclick 属性将 click 事件处理程序附加到 div 元素，如下所示:

 <div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
     ...
 </div>

但是， the best practice is unobtrusive JavaScript 您可以使用 jQuery 的 on() 方法或其速记 click() 轻松实现。例如:

 $(document).ready( function() {
     $('.some-class').on('click', slideonlyone('sms_box'));
     // OR //
     $('.some-class').click(slideonlyone('sms_box'));
 });

在您的处理函数中(例如 slideonlyone() 在这种情况下)您可以引用触发事件的元素(例如 div在这种情况下)与 $(this) 对象。例如，如果您需要它的 ID，您可以使用 $(this).attr('id') 访问它。

---

编辑

在阅读了您对下面@fmsf 的评论后，我发现您还需要动态引用要切换的目标元素。正如@fmsf 所建议的，您可以使用如下数据属性将此信息添加到 div:

<div id="some-id" class="some-class" data-target="sms_box">
    ...
</div>

要访问元素的数据属性，您可以使用@fmsf 示例中的attr() 方法，但最佳做法是使用jQuery 的data() 方法像这样:

 function slideonlyone() {
     var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
     var target_id  = $(this).data('target'); // This would be 'sms_box'
     ...
 }

注意 data-target 是如何通过 data('target') 访问的，没有 data- 前缀。使用数据属性，您可以将各种信息附加到元素，jQuery 会自动将它们添加到元素的 data object 中。 .