ansaurus

Question

How to pass parameter from html to jQuery

Answer 1

A:

Setting up the links names in an array and iterating through them would help you

for (id in contentDivs) {
            if (id === selectedId) {
                tabLinks[id].className = 'selected';
                contentDivs[id].className = 'cal';
            } else {
                tabLinks[id].className = '';
                contentDivs[id].className = 'cal hidden';
            }

That's what I use to do the same thing with tabs.

Meke 2010-10-18 15:17:04

Answer 2

+1 A:

Use smart class names to greater effect. The following example has a set of links which display a corresponding paragraph when clicked.

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt; 
    <script type="text/javascript"> 
    $('.togglers a').live('click', function(e) {
        e.preventDefault();

        // which number list item are we?
        var block = $(this).closest('ul').find('li').index( $(this).parent() );
        console.log(block);

        $('.blocks p').removeClass('visible').eq(block).addClass('visible');
    });
    </script> 
    <style type="text/css"> 
        .blocks p { display: none; }
        .visible { display: block !important; }
    </style> 
</head> 
<body> 

<!-- http://stackoverflow.com/questions/3960508/how-to-pass-parameter-from-html-to-jquery --> 

<ul class="togglers"> 
    <li><a href="#">Block 1</a></li> 
    <li><a href="#">Block 2</a></li> 
    <li><a href="#">Block 3</a></li> 
    <li><a href="#">Block 4</a></li> 
</ul> 

<div class="blocks"> 
    <p>This is block 1.</p> 
    <p>This is block 2.</p> 
    <p>This is block 3.</p> 
    <p>This is block 4.</p> 
</div> 

</body> 
</html>

See the edit history for a version that is slightly less abstracted.

Adam Backstrom 2010-10-18 15:20:20

Answer 3

A:

This looks much more like a structural problem than a programming problem. If I understand your problem correctly you have the following issue: "When a user performs action X, perform actions Y1, Y2, Y3 ... Yn in order."

It would be best if you created an series of small functions to perform the different actions (slide, hide, toggle, etc), a dispatch table to associated those functions with names, and an array of instructions.

You could even put them next to the link, with input tags: <input type="hidden" class="instructions" value="hide:div3,hide:div4,hide:div6,show:div9,toggle:span7,slide:p9">, and then use jquery selectors to find the input associated with the just-clicked link, unpack it, and follow the instructions. That way, your server can provide the information needed without cluttering up your page with too much autogenerated javascript.

Elf Sternberg 2010-10-18 15:22:29

Answer 4

A:

Thank you all, here's my updated code that works:

$(function(){
    $('.myLinks a').live('click', function(e) {
        e.preventDefault();

    var linkClicked = $(this).closest('ul').find('li').index( $(this).parent() );

     $(".linkMessage div").each(function (i) {
        if(!(i == selectedAccNav))
            $(this).hide(300);
        if(i == selectedAccNav)
            $(this).slideToggle(300);
    })
        return false;
    });

});

Thanks again for your help.

-June

June 2010-10-19 13:02:51

ansaurus

tags:

views:

answers:

How to pass parameter from html to jQuery

related questions