[英]hasClass doesn't function as it should
I have a list of li items and would like to trigger a button click if 2 classes are found . 我有一个li项目列表,如果找到2个类 ,我想触发一个按钮单击。
When a list item has 2 classes, I would like to trigger the btn with a click. 当一个列表项有2个类时,我想通过单击触发btn。 Can you guys take a look for me?
你们能帮我看看吗?
The code: 编码:
<script type="text/javascript">
$(document).ready(function(){
var $html = $("#my-div ul li");
if ($html.hasClass("current") || $html.hasClass("extra")) {
$(".btn-1 a").click();}
else if ($html.hasClass("current") || $html.hasClass("extra2")) {
$(".btn-2 a").click();}
});
</script>
So one list item has class current + extra , and the other list item hasClass current + extra2 . 因此,一个列表项具有class current + extra2,而另一个列表项具有Class current + extra2 。
Any idea what I am doing wrong here? 知道我在这里做错了吗?
EDIT: Currently it does not work as should be. 编辑:当前,它不能正常工作。
It currently will always trigger ".btn-1" to click and does not look at the other statements. 当前,它将始终触发“ .btn-1”单击,而不查看其他语句。 I think it just looks at the "current" class and not if also the "extra" or "extra2" class is in the same li item.
我认为它只是查看“当前”类,而不是“ extra”或“ extra2”类是否在同一个li项目中。
Try this: 尝试这个:
<script type="text/javascript">
$(document).ready(function(){
var $html = $("#my-div ul li.current");
if ($html.hasClass("extra")) {
$(".btn-1 a a").click();}
else if ($html.hasClass("extra2")) {
$(".btn-2 a").click();}
});
</script>
The problem is, when you do $html.hasClass("current") || ..
问题是,当您执行
$html.hasClass("current") || ..
$html.hasClass("current") || ..
it would always evalutate to true and would not go to the else
clause when node has a class current
$html.hasClass("current") || ..
当节点具有current
类时,它将始终评估为true并且不会转到else
子句
You are making a comparison of a or b
where you need a and b
so change it to this: 您正在比较需要
a and b
的a or b
,因此将其更改为:
<script type="text/javascript">
$(document).ready(function(){
var $html = $("#my-div ul li");
if ($html.hasClass("current") && $html.hasClass("extra")) {
$(".btn-1 a a").click();}
else if ($html.hasClass("current") && $html.hasClass("extra2")) {
$(".btn-2 a").click();}
});
</script>
Try replacing 尝试更换
$html.hasClass("current") || $html.hasClass("extra")
with 与
$html.hasClass("current") && $html.hasClass("extra")
and also 并且
$html.hasClass("current") || $html.hasClass("extra2")
with 与
$html.hasClass("current") && $html.hasClass("extra2")
The original root of the problem is that you're using or ( ||
) and not and ( &&
) when testing for classes. 问题的根源在于测试类时使用的是or(
||
)而不是and( &&
)。 You're asking "if li has class current OR extra". 您要问“ li是否具有当前课程或其他课程”。
However, you can also refactor it a bit and make it a little cleaner as well: 但是,您也可以对其进行一些重构,并使它更加整洁:
// first, grab the <li> marked as current
var $current = $('#my-div ul li.current');
// test if we have a match and proceed
if ($current.size()){
// cache the final target selector (by initializing it to `false` we
// can later test and only execute the click when we have a match)
var target = false;
// now get in to second-level classes (can use either `.is()` or
// `.hasClass()` (thought I'd show an alternative method as well))
if ($current.hasClass('.extra')) target = '.btn-1 a a';
else if ($current.hasClass('.extra2')) target = '.btn-2 a';
// else if ($current.hasClass('...')) target = '...'; // more tests
// see if we found a match and click it
if (target) $(target).click();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.