Javascript 运行 jQuery 函数 onclick

Run jQuery function onclick

提问by TheLegend

so i implemented a bit of jQuery that basically toggles content via a slider that was activated by an <a>tag. now thinking about it id rather have the DIV thats holding the link be the link its self.

所以我实现了一些 jQuery，它基本上通过一个由<a>标签激活的滑块来切换内容。现在考虑它，而是让持有链接的 DIV 成为其自身的链接。

the jQuery that i am using is sitting in my head looks like this:

我正在使用的 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>

i was using this as a index type box so there are several products when you click on the <a>tag that used to be an image* it would render a bit of content beneath it describing the products details:

我将其用作索引类型框，因此当您单击<a>曾经是图像的标签时会出现多种产品*，它会在其下方呈现一些描述产品详细信息的内容：

<div class="system_box">
  <h2>BEE Scorecard database</h2>
  <p>________________</p>
  <a href="javascript:slideonlyone('sms_box');"></a>
</div>

the products details are wrapped in this div.

产品详细信息包含在此 div 中。

<div class="systems_detail" id="sms_box">
</div>

so when you click on what used to be a image* it would run the slideonlyone('div_id_name') function. the function above then first closes all the other divs with the class name 'system details' and then opens/slides the div with the id that was passed into the slideonlyone function. that way you can toggle products details and not have them all showing at once.

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

note i only kept the <a>tag to show you what was in there i will be getting rid of it.

请注意，我只保留了<a>标签以向您展示里面有什么，我将摆脱它。

note: i had an idea of just wrapping the whole div in an <a>tag but is that good practice?

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

So now what i am wondering is since you need JavaScript to run onclick on a div tag how do you write it so that it still runs my slideonlyone function?

所以现在我想知道的是，因为你需要 JavaScript 来运行 onclick 一个 div 标签，你如何编写它以便它仍然运行我的 slideonlyone 功能？

回答by Boaz - Reinstate Monica

Using obtrusive JavaScript(i.e. inline code) as in your example, you can attach the click event handler to the divelement with the onclickattribute like so:

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

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

However, the best practice is unobtrusive JavaScriptwhich you can easily achieve by using jQuery's on()method or its shorthand click(). For example:

然而，最佳实践是使用不显眼的 JavaScript，您可以通过使用 jQuery 的on()方法或其简写方式轻松实现click()。例如：

 $(document).ready( function() {
     $('.some-class').on('click', slideonlyone('sms_box'));
     // OR //
     $('.some-class').click(slideonlyone('sms_box'));
 });

Inside your handler function (e.g. slideonlyone()in this case) you can reference the element that triggeredthe event (e.g. the divin this case) with the $(this)object. For example, if you need its ID, you can access it with $(this).attr('id').

在您的处理程序函数中（例如slideonlyone()在这种情况下），您可以使用对象引用触发事件的元素（例如div在这种情况下）$(this)。例如，如果您需要它的 ID，您可以使用$(this).attr('id').

---

---

EDIT

编辑

After reading your comment to @fmsf below, I see you also need to dynamically reference the target element to be toggled. As @fmsf suggests, you can add this information to the divwith a data-attribute like so:

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

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

To access the element's data-attribute you can use the attr()method as in @fmsf's example, but the best practice is to use jQuery's data()method like so:

要访问元素的数据属性，您可以使用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'
     ...
 }

Note how data-targetis accessed with data('target'), without the data-prefix. Using data-attributes you can attach all sorts of information to an element and jQuery would automatically add them to the element's data object.

请注意如何data-target使用data('target'), 不带data-前缀访问。使用数据属性，您可以将各种信息附加到元素，jQuery 会自动将它们添加到元素的数据对象中。

回答by fmsf

Why do you need to attach it to the HTML? Just bind the function with hover

为什么需要将其附加到 HTML 中？只需将功能与悬停绑定

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

If you do insist to have JS references inside the html, which is usualy a bad idea you can use:

如果您确实坚持在 html 中包含 JS 引用，这通常是一个坏主意，您可以使用：

onmouseover="yourJavaScriptCode()"

after topic edit:

主题编辑后：

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

...

...

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

回答by gillyspy

You can bind the mouseenterand mouseleaveevents and jQuery will emulate those where they are not native.

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

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

fiddle

小提琴

note: do not use hover as that is deprecated

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

回答by THEtheChad

There's several things you can improve upon here. To start, there's no reason to use an <a>(anchor) tag since you don't have a link.

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

Every element can be bound to click and hover events... divs, spans, labels, inputs, etc.

每个元素都可以绑定到点击和悬停事件……div、跨度、标签、输入等。

I can't really identify what it is you're trying to do, though. You're mixing the goal with your own implementation and, from what I've seen so far, you're not really sure how to do it. Could you better illustrate what it is you're trying to accomplish?

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

== EDIT ==

== 编辑 ==

The requirements are still very vague. I've implemented a very quick version of what I'm imagining you're saying ... or something close that illustrates how you might be able to do it. Left me know if I'm on the right track.

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

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

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