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

Question

我想向一个jQuery函数传递一个值。以下是Javascript示例代码。我想将此javascript函数转换为jquery函数。如何将州名传递给jQuery onclick函数？

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

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

请帮助我。

- sjkon

Answer 1

你并没有明确说明你是否有一系列锚点来添加不同的状态，还是说......？

如果是的话，你可以像这样为每个链接记录相应的状态名称：

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

然后在 JavaScript 中，使用 jQuery：

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

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

文档就绪处理程序确保锚点单击绑定不会发生，直到文档实际准备好，即在元素已被解析并可以从JS访问之后。 （如果您将JS放在body元素末尾的脚本块中，则不需要就绪处理程序。）

- nnnnnn

---

如果你愿意的话，你也可以使用 $(this).data('stateName')。 - mu is too short

@muistooshort - 是的。我之所以没有这样做，是因为我习惯使用.data()仅检索以前使用.data()设置的值，而不是属性值。在这种情况下并不重要，但我不喜欢.data()在用于检索HTML属性时尝试自动类型转换的方式。 - nnnnnn

我理解你所说的“软件假装比它实际更聪明”的部分，我更喜欢诚实和一贯的愚蠢 :) - mu is too short

Answer 2

像这样：

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

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

然后对于HTML，您可以像这样放置一些ID：

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

或者，如果你有很多状态（我猜这就是你想做的），那么你可以像这样通过CSS类引用链接：

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

然后你的jQuery代码变成了：

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

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

为了连接事件处理，您可以将jQuery代码放在文档准备好的函数中，如下所示：

$(document).ready(function() {

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

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

- frenchie

---

请问您能提供这行代码的对应代码吗？ <a onclick="showState('state_name')">添加状态</a>。 - sjkon

不需要使用onclick="showState(...)，jquery会为您处理事件。您可能希望在HTML中放置一些ID来引用链接；请参见编辑。 - frenchie

Answer 3

如果您有多个带有不同参数的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);
} 

然后您可以像这样使用自定义属性

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

- yogi

---

жҲ‘и®Өдёәж•°жҚ®еұһжҖ§пјҲ<a data-state="..."> е’Ң $(this).data('state')пјүдјҡжӣҙеҘҪпјҢиҖҢдё”иҝҳиғҪи®©дҪ жӢҘжңүжңүж•Ҳзҡ„ HTMLгҖӮ - mu is too short

Answer 4

你可以像这样做：

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

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

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

- Jesse

Answer 5

<a>Montana</a>

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

- Sushanth --