简而言之,我有一组.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,它也将被解雇