通过CSS Selector将参数传递给javascript函数

Passing a parameter to javascript function via CSS Selector

本文关键字：javascript 函数 参数传递 CSS Selector 通过      更新时间：2023-09-26

简而言之，我有一组.li

<ul>
  <li class="lmit_1"><a href="#" >Home</a></li>
  <li class="lmit_2"><a href="#">About us</a></li>
  <li class="lmit_3"><a href="#">Who we are</a></li>
  <li class="lmit_4"><a href="#">Whats new</a></li>
  <li class="lmit_5"><a href="#">Contact Us</a></li>    
</ul>

和我的javascript（jQuery）

<script>
  $(".lmit_" + id).click(function () {
    alert(id);
  });
</script>

我想做的是接收css类末尾的任何数字作为参数（例如.lmit_3将允许id=3），因此alert（id）应该导致一个数字为3的弹出窗口？我是编程和javascript的新手，所以如果答案摆在我面前，我很抱歉。。。

演示：http://jsfiddle.net/sFwZj/1/

$('li').click(function () {
  alert($(this).attr('class').split('_')[1]);
});

在您的代码中，您使用了未声明的名为id的变量，因此当您尝试".lmit_" + id时，它应该抛出错误ReferenceError: id is not defined。

而且我认为你应该使用id而不是class，正如前面提到的，如果你将数字存储在data-id属性中，那么你可以通过$(this).data('id')获得它，这可能会更好。

$("li").click(function () {
  alert(this.className.split('_')[1]);
});

应该这样做

但为什么不

    <ul>
     <li class="lmit" id="lmit_1"><a href="#" >Home</a></li>
     <li class="lmit" id="lmit_2><a href="#">About us</a></li>

带有

$(".lmit").click(function () {
  alert(this.id.split('_')[1]);
})

最好将要使用的任何数据存储在数据属性中。这样，您就不会过于依赖类和id（以及字符串处理），也不会在格式和功能之间有一些分离。

您的html将如下所示：

 <ul>
<li class="lmit" data-myattr="1"><a href="#" >Home</a></li>
<li class="lmit" data-myattr="2"><a href="#">About us</a></li>
</ul>

注意，datamyattr可以被称为任何带有"data-"前缀的东西。

访问您的数据

       $(".lmit").click(function(){
//you can access it as an attribute
        alert($(this).attr("data-myattr"));
//or you can access it as data
           alert($(this).data("myattr"));
        })

或者对于更无类的解决方案，使用事件委派

$("ul").delegate("li", "click", function() {
 alert($(this).data("myattr"));
});

所以你在html 中根本不需要lmit类

 <ul>
<li data-myattr="1"><a href="#" >Home</a></li>
<li data-myattr="2"><a href="#">About us</a></li>
</ul>

尝试这个

$('ul li').on('click', function(){
    alert($(this).prop('class').split('_')[1]);
});

上面的答案都是正确的。如果你想在<ul>中获取项目编号，你有一个替代方案。

$('li').click(function() {
    alert($(this).index()+1);
});

好处是您不必生成类名（如果这就是它们的全部用途）

$('[li][class^="lmit_"]').click(function () {
  alert($(this).attr('class').split('_')[1]);
});

如果你使用$（'li'），如果你点击任何一个没有"limit_"类的li，它也将被解雇

相关文章：