admin管理员组文章数量:1325675
So, in short, I have a set of .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>
and my javascript (jQuery)
<script>
$(".lmit_" + id).click(function () {
alert(id);
});
</script>
What I am trying to do is receive whatever number is at the end of the css class as a parameter (.lmit_3 for example would allow id = 3) and therefore alert(id) should lead to a popup with the number 3? I am new to both programming and javascript so my apologies if the answer is staring me in the face...
So, in short, I have a set of .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>
and my javascript (jQuery)
<script>
$(".lmit_" + id).click(function () {
alert(id);
});
</script>
What I am trying to do is receive whatever number is at the end of the css class as a parameter (.lmit_3 for example would allow id = 3) and therefore alert(id) should lead to a popup with the number 3? I am new to both programming and javascript so my apologies if the answer is staring me in the face...
Share Improve this question edited Sep 6, 2012 at 4:48 Danil Speransky 30.5k6 gold badges69 silver badges78 bronze badges asked Sep 6, 2012 at 3:50 Melbourne2991Melbourne2991 11.8k12 gold badges47 silver badges82 bronze badges 2-
Why can't you give all of them a mon class and make the
lmit_n
anid
? There's little use to having unique classes. – Blender Commented Sep 6, 2012 at 3:53 - @Blender: Or better, use a data attribute to carry the, um, data. – mu is too short Commented Sep 6, 2012 at 4:11
6 Answers
Reset to default 4Demo: http://jsfiddle/sFwZj/1/
$('li').click(function () {
alert($(this).attr('class').split('_')[1]);
});
In your code you use undeclared variable called id
, so it should throw error ReferenceError: id is not defined
, when you try ".lmit_" + id
.
And also I think you should use id
not class
for this, also as was mentioned probably it will be better if you will store number in something like data-id
attribute, then you may get it by $(this).data('id')
.
$("li").click(function () {
alert(this.className.split('_')[1]);
});
should do it
But why not
<ul>
<li class="lmit" id="lmit_1"><a href="#" >Home</a></li>
<li class="lmit" id="lmit_2><a href="#">About us</a></li>
with
$(".lmit").click(function () {
alert(this.id.split('_')[1]);
})
It is probably best to store any data that you want to use in the data attribute. This way you are not relying on classes and ids too heavily (and string processing) as well as have some separation between formatting and functionality.
Your html will look like this:
<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>
note that data-myattr can be called anything with a "data-" prefix.
to access your 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"));
})
or for even more classless solution use event delegation
$("ul").delegate("li", "click", function() {
alert($(this).data("myattr"));
});
so you do not need lmit class at all in your html
<ul>
<li data-myattr="1"><a href="#" >Home</a></li>
<li data-myattr="2"><a href="#">About us</a></li>
</ul>
try this
$('ul li').on('click', function(){
alert($(this).prop('class').split('_')[1]);
});
The answers above are all correct. If you wanted to grab the item number in the <ul>
, you have an alternative.
$('li').click(function() {
alert($(this).index()+1);
});
The benefit is that you will not have to generate the class names (if that is all they are used for)
$('[li][class^="lmit_"]').click(function () {
alert($(this).attr('class').split('_')[1]);
});
if you use $('li') if u click on any li it does not have "limit_" class also will be fired.
本文标签: jqueryPassing a parameter to javascript function via CSS SelectorStack Overflow
版权声明:本文标题:jquery - Passing a parameter to javascript function via CSS Selector - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742155122a2423912.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论