运行 jQuery 函数 onclick

Run jQuery function onclick(运行 jQuery 函数 onclick)

问题描述

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

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 在我的脑海中看起来像这样:

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

<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> 标记时会有几个产品* 它会在其下方呈现一些内容描述产品细节:

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:

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

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

the products details are wrapped in this div.

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

因此，当您单击曾经是图像的内容*时，它将运行 slideonlyone('div_id_name') 函数.然后上面的函数首先关闭所有其他具有类名系统详细信息"的 div，然后打开/滑动具有传递给 slideonlyone 函数的 id 的 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.

注意，我只保留了 <a> 标签来向您展示其中的内容，我将摆脱它.

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

注意:我的想法是将整个 div 包装在 <a> 标记中，但这是一种好的做法吗?

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

所以现在我想知道的是，既然你需要 JavaScript 来在 div 标签上运行 onclick，你如何编写它以便它仍然运行我的 slideonlyone 函数?

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 元素，如下所示:

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

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

然而，最佳做法是不引人注目JavaScript 可以通过使用 jQuery 的 on() 方法或其简写 click() 轻松实现.例如:

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

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

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

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

编辑

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

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 div with a data-attribute like so:

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

要访问元素的数据属性，您可以使用 @fmsf 示例中的 attr() 方法，但最佳实践是使用 jQuery 的 data() 方法像这样:

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:

 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 会自动将它们添加到元素的 数据对象.

Note how data-target is 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.

这篇关于运行 jQuery 函数 onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！