Geek Answers Handbook

Run jQuery onclick function

so I implemented a bit of jQuery, which basically switches the content using the slider that was activated by the <a> tag. Now, thinking about it, rather, there is a DIV that holds the link as a link to itself.

The jQuery I'm using sits 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 used this as an index type window, so when I click on the <a> tag, which used to be an image, there are several products, it will display a little of the content below, describing the product details:

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

product details are wrapped in this div.

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

so when you click on what used to be an image *, it ran the slideonlyone ('div_id_name') function. the above function first closes all other divs with the class name 'system details', and then opens the / slides div with the identifier that was passed to the slideonlyone function. this way you can switch product details and not show them all at once.

note I saved the <a> tag to show you what was there, I will get rid of it.

note: I had the idea of ​​just wrapping the entire div with an <a> tag, but is this good practice?

So now I am wondering, since you need JavaScript to run onclick in a div tag, how do you write it so that it still runs my slide function?

+6
source share
4 answers

Using intrusive JavaScript (e.g. inline code), as in your example, you can attach a click event handler to a div element with an onclick attribute, for example like this:

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

However , the best practice is unobtrusive JavaScript , which you can easily achieve using the jQuery on() method or its shortcut to click() . For instance:

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

Inside the function of your handler (for example, slideonlyone() in this case), you can refer to the element that triggered the event (for example, div in this case) with the object $(this) . For example, if you need its identifier, you can access it using $(this).attr('id') .

EDIT

After reading your comment on @fmsf below, I see that you also need to dynamically reference the target element to be switched. As @fmsf suggests, you can add this information to a div with a data attribute, for example:

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

To access the data attribute of an element, you can use the attr() method, as in the @fmsf example, but it is best to use the jQuery data() method:

  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 that data-target accessed using data('target') without the data- prefix. Using data attributes, you can attach all kinds of information to an element, and jQuery will automatically add them to the element's data object .

+15
source

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

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

If you insist on having JS links inside html, which is usually a bad idea, you can use:

 onmouseover="yourJavaScriptCode()"

after editing the topic:

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

...

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

You can bind mouseenter and mouseleave , and jQuery will emulate those where they are not native.

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

fiddle

Note: do not use hovering as it is deprecated

0
source

There are a few things you can improve here. For starters, there is no reason to use the <a> (anchor) tag, since you have no link.

Each element can be attached to clicks and event hangs ... divs, spans, labels, input, etc.

I cannot really determine what you are trying to do. You mix the goal with your own implementation, and as I have seen so far, you are not quite sure how to do this. Could you better illustrate what exactly you are trying to accomplish?

== EDIT ==

The requirements are still very vague. I implemented a very quick version of what I imagine you are saying ... or something close that illustrates how you could do this. Keep me posted if I'm on the right track.

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

0
source

More articles:


All Articles