Question

所以我有这个html标签：

<h2 id="2">
  <a class="toggle" data-toggle="collapse" data-target="#sites">Websites <i class="fa fa-chevron-circle-down"></i></a>
</h2>

然后这个jquery函数：

$("#1 a, #2 a").click(
    function() {
        if ($(this + "i").hasClass('fa-chevron-circle-down')) {
            $(this + "i").removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
        } else {
            $(this + "i").removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
        }
    }
);

这个想法是，当你点击html链接时，它会改变箭头的方向。这确实有效，但问题是它将页面上的每个图标都更改为该图标。

因此，例如，如果按下上面具有fa-chevron-circle-down的html，它将变为fa-chevron-circle-up，但也将更改我页面上的所有其他图标，无论它具有什么图标FA-字形的圆起来。那么我怎样才能改善我的功能呢？我不明白为什么会这样，所以如果有人能够解释发生了什么。谢谢！

https://jsfiddle.net/xyeec6x6/1/

Answer 1

您无法连接对象和字符串，例如this + 'i'。简单的方法是使用find()

$(this).find("i")

Answer 2

试试这个比其他答案更简单。首先，使用两个toggleClasses将简化ifs的使用，也应该使用find来定位<i>。

$("#2 a, #1 a").click(function () {
  $(this).find('i').toggleClass('fa-chevron-circle-down').toggleClass('fa-chevron-circle-up');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


<h2 id="2">
  <a class="toggle" data-toggle="collapse" data-target="#sites">Websites <i class="fa fa-chevron-circle-down"></i></a>
</h2>

用这个构建的jQuery选择器

2 个答案: