运行jQuery函数onclick

Question

所以我实现了一些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>

因此,当您单击以前是图像*时,它将运行slideonlyone('div_id_name')函数.然后上面的函数首先关闭所有其他具有类名"系统详细信息"的div,然后使用传递给slideonlyone函数的id打开/滑动div.通过这种方式,您可以切换产品详细信息,而不是一次性显示它们.

请注意我只保留<a>标签,告诉你在那里我会摆脱它.

注意:我有一个想法,只是将整个div包装在一个<a>标签中,但这是一个好习惯吗？

所以现在我想知道的是,因为你需要JavaScript在div标签上运行,你如何编写它以便它仍然运行我的slideonlyone函数？

Answer 1

使用类似于示例的突出JavaScript(即内联代码),可以将click事件处理程序附加到div具有如下onclick属性的元素:

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

但是,最佳实践是不显眼的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>

要访问元素的data-attribute,您可以使用attr()@ fmsf示例中的方法,但最佳做法是使用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会自动将它们添加到元素的数据对象中.

Answer 2

为什么需要将它附加到HTML？只需用悬停绑定该功能即可

$("div.system_box").hover(function(){ mousin }, 
                          function() { mouseout });

如果你坚持在html中包含JS引用,这通常是个坏主意你可以使用:

onmouseover="yourJavaScriptCode()"

主题编辑后:

<div class="system_box" data-target="sms_box">

...

$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });