11

所以我实现了一些 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 标签上运行 onclick 你如何编写它以便它仍然运行我的 slideonlyone 函数？

4

4 回答 4

23

在您的示例中使用突兀的 JavaScript（即内联代码），您可以将 click 事件处理程序附加到具有如下属性的div元素：onclick

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

然而，最佳实践是不显眼的 JavaScripton() ，您可以通过使用 jQuery 的方法或其简写方式轻松实现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>

要访问元素的数据属性，您可以使用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-前缀进行访问。使用 data-attributes 您可以将各种信息附加到元素，jQuery 会自动将它们添加到元素的数据对象中。

于 2013-01-28T09:14:38.333 回答
7

为什么需要将它附加到 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")); });
于 2013-01-28T08:19:12.677 回答
0

您可以绑定mouseenterandmouseleave事件，jQuery 将模拟那些它们不是原生的。

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

小提琴

注意：不要使用悬停，因为它已被弃用

于 2013-01-28T08:32:46.077 回答
0

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

每个元素都可以绑定到单击和悬停事件... div、span、标签、输入等。

不过，我无法真正确定您要做什么。您将目标与您自己的实现混合在一起，从我目前所见，您并不确定如何去做。您能否更好地说明您要完成的工作？

== 编辑 ==

要求仍然很模糊。我已经实现了我想象中你所说的一个非常快速的版本......或者一些接近的东西来说明你如何能够做到这一点。让我知道我是否在正确的轨道上。

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

于 2013-01-28T08:35:08.410 回答