通过 CSS 选择器将参数传递给 javascript 函数答案

【问题标题】：Passing a parameter to javascript function via CSS Selector通过 CSS 选择器将参数传递给 javascript 函数
【发布时间】：2012-08-30 20:06:43
【问题描述】：

所以，简而言之，我有一套.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 都很陌生，所以如果答案让我眼前一亮，我深表歉意......

【问题讨论】：

你为什么不能给他们一个共同的类，把lmit_n变成id？拥有独特的课程几乎没有用处。
@Blender：或者更好的是，使用数据属性来携带，嗯，数据。

标签： javascript jquery html css dom

【解决方案1】：

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

如果你使用 $('li') 如果你点击任何没有 "limit_" 类的 li 也会被触发。

【讨论】：

【解决方案2】：

演示：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 属性中可能会更好，那么您可以通过@987654329 获得它@。

【讨论】：

我试过你的代码这行得通，但不是 ".lmit" +id
工作，谢谢大家！出于好奇，我的代码试图做什么？还是完全不合时宜？
完全关闭.. 除非您有一个函数实际上将id 作为参数传入，您可以使用.. 或者如果它在循环内.. 但id 不代表任何东西
.prop 应该比 attr 好
@Melbourne2991 请考虑接受答案

【解决方案3】：

最好将您想要使用的任何数据存储在数据属性中。这样您就不会过度依赖类和 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>

请注意，data-myattr 可以被称为任何带有“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>

【讨论】：

【解决方案4】：

以上答案都是正确的。如果您想在<ul> 中获取商品编号，您还有其他选择。

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

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

【讨论】：

【解决方案5】：

$("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]);
})

【讨论】：

【解决方案6】：

试试这个

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

【讨论】：