：

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>标记时，有几种产品*它会在其下面呈现一些描述产品详细信息的内容：< / p>

<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>标签中，但这是一个好习惯吗？

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

Answer 1

使用obtrusive JavaScript（即内联代码），您可以将点击事件处理程序附加到div元素，并使用onclick属性，如下所示：

 <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） 1}}对象。例如，如果您需要其ID，则可以使用$(this)访问它。

修改

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

div

要访问元素的data-attribute，您可以使用@ {fmsf示例中的<div id="some-id" class="some-class" data-target="sms_box"> ... </div>方法，但最佳做法是使用jQuery的attr()方法，如下所示：

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。

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

fiddle

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

Answer 4

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

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

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

==编辑==

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

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

运行jQuery函数onclick

4 个答案:

：