运行jQuery函数onclick [英] Run jQuery function onclick

问题描述

所以我实现了一点jQuery，它基本上通过一个由< a> 标签激活的滑块来切换内容。现在想想它ID，而不是DIV持有该链接的链接是自己的。

我正在使用的jQuery坐在我的头上看起来像这样：

 < script type =text / javascript> 
函数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记分卡数据库< / h2> 
< p> ________________< / p> 
< a href =javascript：slideonlyone（'sms_box'）;>< / a> 
< / div> 
  

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

 < div class =systems_detailid =sms_box> 
< / div> 
  

所以当你点击过去是图片时*它会运行slideonlyone（'div_id_name' ）功能。上面的函数首先用类名'system details'关闭所有其他div，然后用传入slideonlyone函数的id打开/滑动div。这样您就可以切换产品的详细信息，并且不会一次显示所有内容。

注意我只保留< a> 标签来显示你在那里的东西，我会摆脱它。

注意：我有一个想法，只是将整个div封装在< a> 标记，但这是一种很好的做法？

所以现在我想知道的是因为你需要JavaScript来运行onclick一个div标签你如何编写它，以便它仍然可以运行我的slideonlyone函数？使用 https://stackoverflow.com/questions/8392374/difference-between-obtrusive-and-unobtrusive-javascript\">流氓JavaScript （即内联代码），如您的示例中，您可以将单击事件处理程序附加到 div 元素与 onclick 属性一样：

 < div id =some-idclass =some-classonclick =slideonlyone（'sms_box'）;> 
 ... 
< / div> 
  

然而， 最好的做法是不引人注意的JavaScript ，您可以使用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-idclass =some-classdata-target =sms_box> 
 ... 
< / div> 
  

要访问元素的data-attribute，可以使用 attr（）方法在@ fmsf的例子中，但最好的做法是使用jQuery的 data（）方法，如下所示：

 函数slideonlyone（）{
 var trigger_id = $（this）.attr（'id'）; //这在我们的例子中是'some-id'
 var target_id = $（this）.data（'target'）; //这会是'sms_box'
 ... 
} 
  

注如何使用 data（'target'）访问 data-target ，而不需要 data- 前缀。使用数据属性，您可以将各种信息附加到元素，jQuery会自动将它们添加到元素的数据对象。

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.

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>

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>

the products details are wrapped in this 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.

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

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

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?

解决方案

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>

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

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').

---

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

<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:

 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-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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！