Javascript Jquery添加/删除类不起作用_Javascript_Jquery_Html_Css

Javascript Jquery添加/删除类不起作用

javascript jquery html css

Javascript Jquery添加/删除类不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直试图通过向jquery语句添加css类来旋转箭头。这在显示/隐藏选项卡上使用，该选项卡允许我根据箭头显示打开的选项卡我在上一页有3个标签，但我在新页面上添加了第4个标签，现在它不起作用了它正在打印my console.log，并且没有返回任何错误，所以我很难理解我做错了什么这是JQuery： <script> $("#border-information").click (function() { $("#showhide-information"

我一直试图通过向jquery语句添加css类来旋转箭头。这在显示/隐藏选项卡上使用，该选项卡允许我根据箭头显示打开的选项卡

我在上一页有3个标签，但我在新页面上添加了第4个标签，现在它不起作用了

它正在打印my console.log，并且没有返回任何错误，所以我很难理解我做错了什么

这是JQuery：

<script>
    $("#border-information").click (function() {
        $("#showhide-information").show(500);
        $(".arrowup").addClass("turn");
        } );

    $("#border-resources").click (function() {
        $("#showhide-resource").show(500);
        $(".arrowdown2").addClass("turn");
        } );

    $("#border-comment").click (function() {
        $("#showhide-comment").show(500);
        $(".arrowdown3").addClass("turn");
    } );

    $("#border-timelapse").click (function() {
        $("#showhide-timelapse").show(500);
        $(".arrowdown4").addClass("turn");
    } );

var showHide="one";


$("#border-information").click (function() {
    showHide="one";
    changePanel();
} );

$("#border-resources").click (function() {
    showHide="two";
    changePanel();
} );

$("#border-comment").click (function() {
    showHide="three";
    changePanel();
} );

$("#border-timelapse").click (function() {
    showHide="four";
    changePanel();
} );

function changePanel(){
    switch(showHide){

        case "one":
        //My code
        console.log("my code 1 is working");
        $("#showhide-comment").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown3").removeClass("turn");
        $(".arrowup").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

        case "two":
        //My code
        console.log("my code 2 is working");
        $("#showhide-information").hide(500);
        $("#showhide-comment").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown3").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

        case "three":
        //My code
        console.log("my code 3 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

         case "four":
        //My code
        console.log("my code 4 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-comment").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown3").removeClass("turn");
        break;

        default:
        //My default code
    }
}
;
</script>

根据要求，以下是HTML：

<body>

    <div class="container">
    <div class="livestream">
    <video id="myvideo" class="dacast" height="540px" controls>
    <source src="https://s3-eu-west-1.amazonaws.com/icevideos/140520+Stalbans+Construction+2025/140520.STALBANS.Contruction2025.HIGH.mp4"></source>
    </video>
    </div>
    <a class="overlay"></a>
    <div class="powerpoint">
    <iframe class="slides" src="https://docs.google.com/presentation/d/1lbTjJ5q4fr1X4rgryWEAmkq-WuWJIoseU7Q1NyqXc44/embed?start=false&loop=false&delayms=3000" frameborder="0" height="540px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
    <div class="sidebar-background">
    <div id="sidebar">
        <div class="information">
        <div id="border-information">
    <img src="http://cpdonline.tv/ice-events/arrowUp.png" class="arrowup" height="26px"><p id="information-text">About this event</p>
    </div>
    <div id="showhide-information" class="panels">
    <span class="region">
        <p class="event-float">Event Date - 05/11/2015</p>
        <p>Event Time: 17:30 - 19:30    <br>


        <p>Speakers: <br>

    <span class="indent"><strong> - Cath Schefer</strong> - UK Managing Director, MWH</span><br>
    <span class="indent"><strong> - Professor David Kennedy</strong> - Deputy Director of the Cardiff School of Engineering and professor of Structural Engineering, Cardiff University</span></br>
    <span class="indent"><strong> - Alun Davies</strong> - Business Executive, Alun Griffiths Contractors Ltd</span></br>
    <span class="indent"><strong> - Dawn Turner</strong> - Head of Pension Fund Management, Environment Agency</span>

    </p>


    <span class="description" name="information">
        <p> 
            Presentations will be given on our four strategic themes of;
<br />
<span class="indent">- Resilience <br /></span>
<span class="indent">- Urbanisation <br /></span>
<span class="indent">- Industry Transformation <br /> </span>
<span class="indent">- Resource Scarcity</span>
            <br />
            </p>

<span class="indent">- London</p>
    </span>
<br /> 

    </div>
            </div>
    <div>
    <div id="border-resources">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown2" height="26px"><p id="resources">Resources</p>
    </div>
    <div id="showhide-resource">
    <div class="resource-body" name="resources">
    <p>Additional resources available to go with this lecture:</p>
    <p class="indent"> - <img class="pdf" src="/new.cpd/ice-events/livestream/img/pdf.png"> This is a pdf.pdf</p>
    </div>
    </div>
    </div>

    <div>
    <div id="border-timelapse">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown4" height="26px"><p id="timelapse">Timelapse</p>
    </div>
    <div id="showhide-timelapse">
    <div class="timelapse-body" name="timelapse">
    <br>
    <div id="jump">10:00 - This is something</div>
    <br>
    <div id="jump2">20:00 - This is something</div>
    <br>

    </div>
    </div>
    </div>

    <div id="border-comment">

    <div id="comments">
    <p class="comment-title">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown3" height="26px"><p id="timelapse">Live Chat</p>
    </p>
    </div>
    </div>
    <div id="showhide-comment">

    <p>ebfgksbgjklsdbghklsg</p>
        </div>
    <br
    </div>


有关此事件的
事件日期-2015年11月5日
活动时间：17:30-19:30

发言者：

-Cath Schefer-MWH英国董事总经理

-大卫·肯尼迪教授-加的夫大学加的夫工程学院副院长兼结构工程教授

-阿伦戴维斯-阿伦格里菲斯承包商有限公司业务主管

-道恩·特纳-环境署养老基金管理负责人


将介绍我们的四个战略主题：；


-弹性

-城市化

-产业转型

-资源匮乏



-伦敦


资源
本课程提供的其他资源：
-这是一个pdf.pdf文件
timelapse


10:00-这是一件大事


20:00-这是一件大事



实时聊天

EBFGKSBGJKLSDBGKLSG
添加类时，请尝试以下操作
1.首先删除要添加的类
2.并在之后添加动画类
$(".arrowup").removeClass("turn");
$(".arrowup").addClass("turn");

你的点击功能触发了吗？如果您的全局showhide变量始终为1，我建议您删除该全局变量，并使用switch变量作为参数调用changePanel（）。调试问题的一种简单方法是在changePanel（）函数的开头添加一个console.log（showhide）
addClass和removeClass的语法正确。
请尝试以下代码。我相信它将根据您的需要工作：
稍微修改了HTML：
<img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowup turn" height="26px"><p id="information-text">About this event</p>

#包装器{
背景色：#1B9AA1；
宽度：100%；
溢出：隐藏；
} 
身体{
保证金：0；
字体系列：Arial；
身高：100%；
宽度：100%；
}
.集装箱{
背景色：#1B9AA1；
宽度：100%；
}
#边栏{
宽度：100%；
背景色：#1B9AA1；
溢出：隐藏；
身高：70%；
}
#参考资料文本{
字号：26px；
字体大小：无；
显示：内联块；
左：3倍；
颜色：白色；
}
#信息文本{
字号：26px；
字体大小：无；
左侧填充：36px；
颜色：白色；
保证金：0；
浮动：左；
显示：内联块；
}
.说明{
字号：13.5px；
颜色：白色；
显示：内联块；
左：3倍；
}
.地区{
字号：13.5px；
颜色：白色；
左侧填充：60px；
}
#资源{
颜色：白色；
字号：26px；
左侧填充：100px；
字体大小：无；
保证金：0；
页边顶部：1px；
}
.资源机构{
颜色：白色；
字号：13.5px；
左侧填充：105px；
}
#时间点{
颜色：白色；
字号：26px；
保证金：0；
左侧填充：100px；
}
.超时空体{
颜色：白色；
字号：13.5px；
左侧填充：105px；
}
达卡斯特先生{
浮动：左；
宽度：47%；
背景色：黑色；
明确：之后；
左边距：40px；
边缘底部：20px；
}
.幻灯片{
左边距：40px；
显示：内联块；
右边距：20px；
宽度：47%；
位置：相对位置；
z指数：0；
}
.评论标题{
保证金：0；
页边顶部：1px；
}
.评论标题{
颜色：白色；
字号：26px；
字体大小：无；
}
#显示隐藏信息{
左侧填充：105px；
}
.评论显示{
宽度：90%；
高度：417px；
边界：无；
背景色：白色；
最大高度：417px；
溢出y：滚动；
保证金：自动；
}
.评论{
宽度：55%；
高度：40px；
左缘：4%；
浮动：左；
显示：内联块；
边界：无；
边界半径：10px 10px 10px 10px；
}
.缩进{
左侧填充：15px；
}
.注释按钮{
宽度：30%；
保证金权利：4%；
浮动：对；
显示：内联块；
高度：40px；
颜色：黑色；
字体大小：无；
背景色：白色；
填充：0；
边界：无；
边界半径：10px 10px 10px 10px；
}
.livestream{
背景色：#1B9AA1；
}
#显示隐藏资源{
显示：无；
}
#显示隐藏评论{
显示：无；
}
#显示隐藏时间点{
显示：无；
}
.pdf{
高度：20px；
}
阿罗普先生{
浮动：左；
显示：内联块；
左侧填充：40px；
}
.2{
浮动：左；
显示：内联块；
左侧填充：40px；
}
.箭头向下
<img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowup turn" height="26px"><p id="information-text">About this event</p>