Question

我试图切换一个雪佛龙图标，但没有任何事情发生。

$("span:last").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");

如果我在没有if else部分的情况下将此代码添加到slidetoggle下方，则图标会更改为up但不会再次显示为。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">       </script>
//starting jquery
<script>

$("#header").ready(function(){
    $("#logo").hide();
    $("#header").click(function(){
    $("#logo").slideToggle("slow");

});


$("#down").click(function() {

    var $changeicon= $("down");

    if ($changeicon .hasclass("glyphicon-chevron-down")) {

        $changeicon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
    }
    else {
        $changeicon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");

    } 
    });
});
</script>
<body>
<button type ="button" class ="btn btn-success btn-lg" id ="header">
        <span class ="glyphicon glyphicon-home pull-left">    <strong>Header</strong>       </span><span class ="glyphicon glyphicon-chevron-down pull-right btn-small" id ="down"> </span></button>
<div class ="row">
         <div class ="col-lg-12" >
            <p id ="logo" style="background-color:#D9D9D9;">  &nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Logo</a><br/> &nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Skype</a></p>

            </div> </div>
  </body>
  </html>

Answer 1

改变这个：

var $changeicon= $("down");

到此：

var $changeicon= $("#down");

您忘记了#个符号，$changeicon中没有任何内容。

更新

您还缺少：});以关闭标头就绪部分。

所以jQuery应该这样：

$(function() {
    $("#header").ready(function() {
        $("#logo").hide();
        $("#header").click(function() {
            $("#logo").slideToggle("slow");
        });
    });
    $("#down").click(function() {
        var $changeicon = $("#down");
        if ($changeicon.hasclass("glyphicon-chevron-down")) {

            $changeicon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
        }
        else {
            $changeicon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
        }
    });
});

Answer 2

为了使代码正常工作，您需要更改以下内容：

jquery点击选择器 - ＆gt;将$("#down").click(function()更改为$("#header").click(function()
id =“down”的元素没有大小 - ＆gt;要将此更改变更为$changeicon= $("down");至$changeicon= $(this).find("#down");
班级中的大写“C”字母 - ＆gt; $changeicon .hasclass("glyphicon-chevron-down")需要$changeicon.hasClass("glyphicon-chevron-down")

检查工作小提琴here

PS。了解如何使用浏览器的调试工具......它们非常有用，可以节省大量时间等待像我这样的人来解决语法错误。

上升后，雪佛龙图标不会下降

2 个答案: