Question

我有完美的两个jQuery函数，我需要将参数传递给它，因为我需要使用不同的参数多次调用这些函数。

$('#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", '');
    }
});

在上面的代码中，“link-31”和“row-31”是两个html组件的id。这些是我需要作为参数传递的两个值。那怎么办呢？

提前致谢。

第一个函数是在点击链接（即标签）时执行的，其中id =“link-31”，突出显示一个表格行（即标签），其中id =“row-31”。

第二个功能是通过单击页面上除删除突出显示的突出显示行以外的任何位置来执行的。

现在假设有'n'个链接用于突出显示'n'个行，在这种情况下，只有链接ID和行ID会在上面的代码中改变。

以下是受上述代码影响的html文件部分。

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

Answer 1

似乎您希望在单击控件时突出显示该行，并在单击控件时撤消该行。至于传递参数，我们可以看到HTML，因为可以以编程方式寻找行的ID。

<强> 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"
        });
    }
});

我建议使用addClass()和removeClass()，而不是在javascript中添加CSS。

Answer 2

事件处理函数中的

，如.click（） event.target 表示触发事件的元素。

要从中检索html属性，只需执行 .attr（＆＃39; attributeName＆＃39;）;

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

Answer 3

您可以使用以下代码获取ID
，而不是将值传递给方法

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

Answer 4

我认为你应该采取另一种方式。

在#link-31保留具有目标节点ID的属性。像：

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

然后将其绑定为：

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

所以，这里在HTML节点中追加data-target属性就好了在函数中传递参数。之后不是在HTML元素中使用ID，而是放置一个类，然后在该类上绑定事件，以便在页面中全局工作。

如何将参数传递给jQuery函数？

4 个答案: