How to pass parameters to jQuery function?

Question

I have this perfectly working two jQuery functions, and I need to pass parameter to it, as I need to call these functions multiple times with different parameters.

$('#link-31').click(function() {
    $(document.getElementById('row-31')).css("background-color", "#B3B3FF");
    $(document.getElementById('row-31')).css("border", "#0000FF");
});

$(document).on('click', function(e) {
    if (!$(e.target).closest('#link-31').length) {
        $('#row-31').css("background-color", '');
        $('#row-31').css("border", '');
    }
});

In the above code "link-31" and "row-31" are id of two html components. These are the two values that I need to pass as parameters. So how can this be done?

Thanks in advance.

The first function is executed on click of link(i.e. tag) with id="link-31", that highlights a table row(i.e. tag) with id="row-31".

The second function is executed by clicking anywhere on the page other than the highlighted row that removes the highlighting.

Now there are assume 'n' number of links that are to be used for highlighting 'n' number of rows, in this case only the link id and row id will change in the above code.

Below is the part of html file that is affected by the above code.

<body>
<ul class="sidebar-nav" style="padding-top: 70px">  
    <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix col-sm-3">
        <li id="link-1" class="list-group-item"><a href="#data-1" class="scroll">1</a></li>
        <li id="link-2" class="list-group-item"><a href="#data-2" class="scroll">2</a></li>
        <li id="link-3" class="list-group-item"><a href="#data-3" class="scroll">3</a></li>
        .               
        .
        .
        <li id="link-31" class="list-group-item"><a href="#data-31" class="scroll">31</a></li>
        <li id="link-32" class="list-group-item"><a href="#data-32" class="scroll">32</a></li>
    </nav>          
</ul>


<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
        <tbody>
        <tr id="row-1">
            <th scope="row"><a id="data-1" class="scroll">1</a></th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr id="row-2">
            <th scope="row"><a id="data-2" class="scroll">2</a></th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        .
        .
        .
        <tr id="row-32">
            <th scope="row"><a id="data-32" class="scroll">32</a></th>  
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Please elaborate and Also it would be better if you show your HTML. — Satpal, Aug 27 '15 at 11:17
possible duplicate of [jquery .click pass parameters to user function](http://stackoverflow.com/questions/3273350/jquery-click-pass-parameters-to-user-function) — DFayet, Aug 27 '15 at 11:18
I notice you have link-31 and row-31 which may suggest you have other elements that match by ID. If you post your HTML we may be able to show you how to do this programatically, i.e. not have a statement for each matching pair. — Popnoodles, Aug 27 '15 at 11:38

Vivek Ranjan · Answer 1 · 2015-08-27T12:10:47.100

1

Instead of passing the values to method you can use the below code to get the id

var id = $(this).attr('id');//link-31

edited Aug 27 '15 at 12:10

answered Aug 27 '15 at 11:21

Vivek Ranjan

1,432
2
15
37

How does this apply to that situation, and how does it solve the problem? – Popnoodles Aug 27 '15 at 11:28
User wants to get the id's as parameter, but its just straight forward way to get id.(This answer does not relate to 'by function parameter') – Vivek Ranjan Aug 27 '15 at 11:30
I think the ans posted by KAD relates the question, but why to make thing complex for user if he just want to get the id – Vivek Ranjan Aug 27 '15 at 11:38
1

So you're assuming they know how to apply this code to theirs. – Popnoodles Aug 27 '15 at 11:40
@Popnoodles Well am just guessing the users problem – Vivek Ranjan Aug 27 '15 at 11:42
1

Down votes does not make any sense until the correct answer is posted. Please justify the down vote. – Vivek Ranjan Aug 27 '15 at 11:47

Ashish Kumar · Answer 2 · 2015-08-27T11:43:03.897

0

I think you should do it another way.

In your #link-31 keep an attribute with target node ID. like:

<div id="link-31" data-target="row-31"></div>

And then bind it like:

$('#link-31').click(function () {
    $("#" + $(this).data("target")).css({
        "background-color": "#B3B3FF",
        "border": "#0000FF"
    });
    //Note:  I think, toggling a class is better option here rather than changing inline CSS
});

So, here appending data-target attribute in HTML node will work like passing parameter in function. And later instead of using ID in HTML elements, put a class and then bind the event on that class, so that that works globally in your page.

edited Aug 27 '15 at 11:43

answered Aug 27 '15 at 11:32

Ashish Kumar

2,991
3
18
27

1

why are you advising to add a completely unnecessary attribute? – Popnoodles Aug 27 '15 at 11:49
Ah I can see why you would, but the click event is only applied to the one element. – Popnoodles Aug 27 '15 at 12:13
I mentioned that later you can use a class instead of ID to bind the event, which will help you to globalize it. – Ashish Kumar Aug 27 '15 at 12:21

score 0 · Answer 3 · answered Aug 27 '15 at 13:02

0

in event handler functions like .click() event.target represents the element where event was fired.

To retrieve html attributes from it just do .attr('attributeName');

$(event.target).attr('id'); //retrieve html id attribute!

answered Aug 27 '15 at 13:02

k1r0s

359
3
14

Popnoodles · Accepted Answer · 2015-08-27T12:10:24.787

-1

It appears that you want the row highlighted when the control is clicked, and undone when anything but the control is clicked. As for passing parameters, we could do with seeing the HTML, as the IDs for the rows can be sought programatically.

Demo

<div id="link-31" class="link">link-31</div>
<h1 id="row-31" class="row">row-31</h1>

<div id="link-32" class="link">link-32</div>
<h1 id="row-32" class="row">row-32</h1>

jQuery

$(document).on('click', function(e) {
    // clear all
    $('.row').css({
        backgroundColor: "",
        border: ""
    });

    // check the target and change the correct row
    if ($(e.target).hasClass('link')) {
        var id = $(e.target).attr('id').replace('link-', '');
        $('#row-' + id).css({
            backgroundColor: "#B3B3FF",
            border: "#0000FF"
        });
    }
});

I suggest using addClass() and removeClass() instead of adding the CSS in javascript.

edited Aug 27 '15 at 12:10

answered Aug 27 '15 at 11:33

Popnoodles

28,090
2
45
53

1

I think the down voter should get his privileged with a min reputation of 10k in this community. Am fixing all the unnecessary downvotes – KAD Aug 27 '15 at 11:45
How do you differentiate $(this).attr('id') & e.target.id – Vivek Ranjan Aug 27 '15 at 11:50
e.target is the element **that is clicked**, not the element in the selector, which is document. $(this).attr('id') would be document id, which doesn't exist. – Popnoodles Aug 27 '15 at 11:52
both method will return link-31 as id when $('#link-31').click(function() {} ? – Vivek Ranjan Aug 27 '15 at 11:58
Thanks for the answer, but I am unable to highlight a table row(tag) inside a html table(tag).
– Sushant Nadkar Aug 27 '15 at 14:55
You can change the css of any element. It doesn't matter that it's a table row. – Popnoodles Aug 27 '15 at 16:12

How to pass parameters to jQuery function?

4 Answers4