运行 jQuery 函数 onclick

所以我实现了一些 jQuery，它基本上通过由滑块激活的滑块来切换内容<a>标签。现在考虑一下，我宁愿让保存链接的 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>

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

注意我只保留了<a>标签来告诉你里面有什么，我将把它扔掉。

注意：我有一个想法，将整个 div 包裹在一个<a>标签，但这是好的做法吗？

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

Using 干扰性 JavaScript https://stackoverflow.com/questions/8392374/difference-between-obtrusive-and-unobtrusive-javascript（即内联代码）如您的示例中所示，您可以将单击事件处理程序附加到div元素与onclick像这样的属性：

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

However, 最佳实践是不引人注目的 JavaScript https://stackoverflow.com/questions/8392374/difference-between-obtrusive-and-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').

EDIT

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

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

要访问元素的数据属性，您可以使用attr()方法如 @fmsf 的示例，但最佳实践是使用 jQuerydata()像这样的方法：

 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 会自动将它们添加到元素的数据对象 http://api.jquery.com/data/.