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

I want to pass a value to a Jquery function. Below is the Javascript sample code. I want to convert this javascript function to a jquery function. How can I pass the state name into a jquery onclick function?

我想将值传递给Jquery函数。以下是Javascript示例代码。我想将这个javascript函数转换为jquery函数。如何将状态名称传递给jquery onclick函数?

<a onclick="showState('state_name')">ADD STATE </a>

 function showState(state_name){
 openbox_state(state_name);
 }

please help me.

请帮我。

5 个解决方案

#1

You don't really make it clear whether you have a series of anchors to add different states, or...?

你真的不清楚你是否有一系列锚点来添加不同的状态,或者......?

If you do, you can do something like this to record the appropriate state name for each link:

如果这样做,您可以执行以下操作来记录每个链接的相应状态名称:

<a data-stateName="state_name">ADD STATE </a>

And then in JS, with jQuery:

然后在JS中使用jQuery:

$(document).ready(function() {
    $("a[data-stateName]").click(function() {
        openbox_state( $(this).attr("data-stateName") );
    });
});

This removes the inline JavaScript from your html, and then uses jQuery to bind a click handler only to those <a> elements that have a data-stateName attribute. The handler then gets the value of that attribute to pass to the openbox_state() function.

这将从您的html中删除内联JavaScript,然后使用jQuery将单击处理程序仅绑定到具有data-stateName属性的那些元素。然后,处理程序获取该属性的值以传递给openbox_state()函数。

The document ready handler ensures that the anchor click binding doesn't happen until the document actually is ready, i.e., after the elements have been parsed and can be accessed from JS. (You don't need a ready handler if you put your JS in a script block at the end of the body element.)

文档就绪处理程序确保在文档实际准备好之前,即在元素被解析并且可以从JS访问之后,锚点击绑定不会发生。 (如果将JS放在body元素末尾的脚本块中,则不需要现成的处理程序。)

#2

If you have multiple a with different arguments like this.

如果您有多个具有不同参数的a。

<a onclick="showState('Delhi')">ADD STATE</a>
<a onclick="showState('Punjab')">ADD STATE</a>
<a onclick="showState('Gujrat')">ADD STATE</a>

function showState(state_name){
 openbox_state(state_name);
}

then you can use custom attributes like this

那么你可以使用这样的自定义属性

<a state="Delhi">ADD STATE</a>
<a state="Punjab">ADD STATE</a>
<a state="Gujrat">ADD STATE</a>

$('a').click(function () {
   var StateName = $(this).attr("state");
   openbox_state(StateName);
});

#3

Like this:

  $('#MyID').click(function () {

        var StateName = $(this).text();
        showState(StateName);       
   });

And then for the HTML, you could put some ID like this:

然后对于HTML,你可以放一些像这样的ID:

<a id="MyID">ADD STATE </a>

Or, if you have many states (which I assume is what you're trying to do) then you could reference the link by CSS class like this:

或者,如果你有许多状态(我假设你正在尝试做什么),那么你可以通过CSS类引用链接,如下所示:

<a class="StateSelector">ADD STATE </a>

And then your jquery code becomes:

然后你的jquery代码变成:

$('.StateSelector').click(function () {

      var StateName = $(this).text();
      showState(StateName);          
});

To wire up the event handling, you can put the jquery code in the document ready function like this:

要连接事件处理,您可以将jquery代码放在文档就绪函数中,如下所示:

$(document).ready(function() {

    $('.StateSelector').click(function () {

          var StateName = $(this).text();
          showState(StateName);          
    });
});

#4

You can do something like this:

你可以这样做:

<a onclick="showState()" id="florida">ADD STATE </a>

 function showState(state_name){
    var state_name = $(this).attr('id')
    openbox_state(state_name);
}

This function will retrieve the "id" value from the link. You can then pass the value onto your "openbox_state()" function. :-)

此函数将从链接中检索“id”值。然后,您可以将值传递到“openbox_state()”函数。 :-)

#5

<a>Montana</a>

$('a').on('click', function(){
     var state = this.text ;   // OR $(this).text();   OR   $(this).html();
     showState(state);
});

#1