Javascript JQuery hasClass—为什么在这种情况下它总是返回false？_Javascript_Jquery_Html

Javascript JQuery hasClass—为什么在这种情况下它总是返回false？

javascript jquery html

Javascript JQuery hasClass—为什么在这种情况下它总是返回false？,javascript,jquery,html,Javascript,Jquery,Html,我有一个带有背景图像的跨度，我想在点击时在加号和减号的背景图像之间切换。我想添加和删除类“open”来完成此操作。我的跨度看起来像这样 <span class="expand open"></span> $(function() { $('.expand').click(function() { if ($(this).hasClass('open')) { $(this).removeClass('open');

我有一个带有背景图像的跨度，我想在点击时在加号和减号的背景图像之间切换。我想添加和删除类“open”来完成此操作。我的跨度看起来像这样

<span class="expand open"></span>

$(function() {
    $('.expand').click(function() {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
        } else {
            $(this).addClass('open');
        }
    });
});

我得到的行为是，它将添加类“open”，但在重复单击之后，不会再次删除它。登录到控制台表明，if语句的计算结果总是false

我已经考虑过使用toggleClass，但还没有这样做，因为一旦这起作用，我打算使用相同的if语句来显示/隐藏内容块

编辑既然人们都在关注我的css，我也会提供。（SASS/SCSS）：

我还可以补充一点，跨度显示正确且可点击，我无法用简化版的代码重现问题。

您的小提琴对我来说很好。只需在

span

中添加一些文本，您就可以实际单击

span

<span class="expand open">Some Text Here</span>

这里有一些文本

小提琴很好用。因此，问题是单击背景图像不起作用。尝试为跨度元素添加一些宽度和高度，然后重试

像这样

.expand {
background: url(http://upload.wikimedia.org/wikipedia/commons/a/a6/Plus_orange.gif) top center no-repeat;
display: block;
height: 21px;
margin: 0 auto;
width: 22px;

} .打开{ 背景：url（）底部中心不重复； } }

Fiddile很好用。您需要在span中添加一些文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        .expand {
            background: url('/Images/Icons/greenplus.png') top center no-repeat;
            display: block;
            height: 21px;
            margin: 0 auto;
            width: 22px;
        }
        .open {
            background: url('/Images/Icons/redminus.png') bottom center no-repeat;
        }
    </style>

    <script type="text/javascript">

        $(function () {
            $('.expand').click(function () {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                } else {
                    $(this).addClass('open');
                }
            });
        });        
    </script>
</head>
    <body>
        <span class="expand open"></span>
    </body>
</html>


.扩大{
背景：url（'/Images/Icons/greenplus.png'）顶部中间不重复；
显示：块；
高度：21px；
保证金：0自动；
宽度：22px；
}
.打开{
背景：url（'/Images/Icons/redemission.png'）底部中心不重复；
}
$（函数（）{
$（'.expand'）。单击（函数（）{
if（$（this）.hasClass（'open'））{
$（this.removeClass（'open'）；
}否则{
$（this.addClass（'open'）；
}
});
});

这对我来说很有用。

虽然这里的答案都不能为我提供解决方案，但有一条关于我问题的评论确实提供了解决方案。将“open”类替换为“expanded”等选项解决了问题。谢谢@Doorknob

你能和我分享这把小提琴吗？它对我很有用，不管怎样，你是怎么点击span的，就像这样，它根本不会出现。在

span

中添加一些文本。是否有

expand

或

open

类的其他元素？您能否创建一个最小的工作示例来演示该问题？给出的代码不会重现该问题。投票关闭。只要跨度实际上是可点击的，代码就可以正常工作-\参见我的编辑。我现在也提供了我的css。问题从来不是我的span不会显示，或者它不可单击，正如我之前发布console.log（）的结果所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        .expand {
            background: url('/Images/Icons/greenplus.png') top center no-repeat;
            display: block;
            height: 21px;
            margin: 0 auto;
            width: 22px;
        }
        .open {
            background: url('/Images/Icons/redminus.png') bottom center no-repeat;
        }
    </style>

    <script type="text/javascript">

        $(function () {
            $('.expand').click(function () {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                } else {
                    $(this).addClass('open');
                }
            });
        });        
    </script>
</head>
    <body>
        <span class="expand open"></span>
    </body>
</html>