Javascript 切换手风琴链接的背景图像

我正在尝试使用javascript获取链接背景图像，以便在单击时切换或交换FAQ手风琴展开/收缩div

我已经在这个JSFIDLE示例（）的基础上完成了工作

你可以看到我的页面在这里工作（）

当您第三次单击其中一个切换链接时，就会出现问题。它获取了错误的背景图像，然后与它的外观不同步

收缩状态的右箭头>和扩展状态的向下箭头是它们应该是什么样子，但显示的是相反的

在第3次或更多次点击时，它在JSFIDLE中似乎工作得很好。知道我的出了什么问题吗

剧本

<script type="text/javascript">
  function changeArrow(element){

var arrow = element;

if(arrow.className == 'background_one'){

  arrow.className = 'background_two';

} else {

  arrow.className = 'background_one';

}

}
</script>

HTML

如果我将余额转移到新的Access 3股权行，我的利率是多少？

之所以发生这种情况，是因为第二次单击类名时，类名还包含已折叠的类

我使用IE的调试器发现：

也许您可以使用

contains

而不是equals，如以下（未测试，但应该可以使用）：

---

您需要检查它是否有类，而不是是否有类，因为您已经多次打开了。在使用jQuery时，可以使用和。你可能还想看看

---

谢谢你，这非常有效，你的描述帮助我理解逻辑。额外的课程似乎不是问题。我的脚本只是做了一个错误的函数。@terriswatek实际上，额外的类是问题所在。您使用的是直接字符串比较的

=

hasClass

不是直接的字符串比较；它查看类是否存在于className中，这本质上就是

所包含的

字符串比较所做的。

.background_one { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevright.gif) center left no-repeat;}
.background_two { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevdown.gif) center left no-repeat;}

<a class="background_one" data-toggle="collapse" data-target="#demo4"    onClick="changeArrow(this)">If I transfer my balance to a new Access 3 Equity Line, what will my interest rate be?</a>

function changeArrow(element){
    element.className = (arrow.className.contains('background_one') ? 
                          'background_two' : 
                          'background_one');
}

function changeArrow(element) {
    var $arrow = $(element);
    if ($arrow.hasClass('background_one')) {
        $arrow.removeClass('background_one');
        $arrow.addClass('background_two');
    } else {
        $arrow.removeClass('background_two');
        $arrow.addClass('background_one');
    }
}