运行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 （即内联代码），可以使用onclick属性将click事件处理程序附加到div元素，如下所示：

 <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() ），您可以使用$(this)对象引用触发事件的元素（例如，在这种情况下为div $(this) 。 例如，如果您需要其ID，则可以使用$(this).attr('id')访问它。

---

编辑

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

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

要访问元素的data-attribute，可以使用@ 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会自动将它们添加到元素的数据对象中 。

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")); });

Answer 3

您可以绑定mouseenter和mouseleave事件，jQuery将模拟它们不是本机的。

$("div.system_box").on('mouseenter', function(){
    //enter
})
.on('mouseleave', function(){
    //leave
});

小提琴

注意：不要使用悬停，因为不推荐使用

Answer 4

你可以在这里改进几件事。 首先，由于您没有链接，因此没有理由使用<a> （锚）标记。

每个元素都可以绑定点击和悬停事件... divs，span，labels，input等。

但是，我无法确定你正在尝试做什么。 你将目标与自己的实现混合在一起，从目前为止我看到的，你并不确定如何去做。 你能更好地说明你想要完成的是什么吗？

==编辑==

要求仍然很模糊。 我已经实现了一个非常快速的版本，我想象你正在说什么...或者接近一些说明你如何能够做到这一点。 如果我走在正确的轨道上，请告诉我。

http://jsfiddle.net/THEtheChad/j9Ump/