更改类功能不起作用答案

【问题标题】：Changing Class Function is Not Working更改类功能不起作用
【发布时间】：2014-01-12 13:06:19
【问题描述】：

我检查了我的 javascript，它没有显示任何错误，但它根本没有做任何事情。

这里是html代码：

<body>
    <!--The div who's function isn't working-->
    <div id="sliderButtonB" onclick='pageSliderBack()'>Go Back</div>    
    <!--End of not-functioning div-->
    <!--The Slider That is supposed to change **backwards** -->
    <div id='slidecarousel' class='p1' onclick='pageSlider(this)'>
        ...
        ...
        ...
    </div>
</body>

这是不起作用的javascript：

function pageSliderBack(){
    var pDiv = $('#slidecarousel')
    if ( pDiv.attr("class").match(/(?:^|\s)p1(?!\S)/) ){
         pDiv.className = "p5";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p2(?!\S)/) ){
        pDiv.className = "p1";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p3(?!\S)/) ){
        pDiv.className = "p2";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p4(?!\S)/) ){
        pDiv.className = "p3";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p5(?!\S)/) ){
        pDiv.className = "p4";
    } else {
        pDiv.className = "SlideErr";
    }
}

这是页面上的其余 javascript；此功能有效，但另一个无效：

function pageSlider(elem){
    if ( elem.className.match(/(?:^|\s)p1(?!\S)/) ){
         elem.className = "p2";
    } else if ( elem.className.match(/(?:^|\s)p2(?!\S)/) ){
        elem.className = "p3";
    } else if ( elem.className.match(/(?:^|\s)p3(?!\S)/) ){
        elem.className = "p4";
    } else if ( elem.className.match(/(?:^|\s)p4(?!\S)/) ){
        elem.className = "p5";
    } else if ( elem.className.match(/(?:^|\s)p5(?!\S)/) ){
        elem.className = "p1";
    } else {
        elem.className = "SlideErr";
    }
}

【问题讨论】：

将函数 pageSliderBack(elem) 更改为函数 pageSliderBack()
将 onclick='pageSliderBack()' 更改为 onclick='pageSliderBack(this)'
感谢您提出的修改建议！
他从不使用函数中的参数，所以没关系。

标签： javascript jquery html

【解决方案1】：

就像在上一个问题中一样，您正在尝试访问 jQuery 元素上的 DOM 属性。应该是：

pDiv[0].className = "p5";

DEMO

【讨论】：

我在声明变量时可以这样做吗？（例如var pdiv = $('#slidecarousel')[0]）
是的，那么您必须使用pdiv.className.match 而不是pdiv.attr('class').match。
如果您始终坚持使用原始 Javascript 或 jQuery，而不是来回切换，您将避免很多困惑。
另外，尝试摆脱所有重复的代码。只需获取类末尾的数字，对其加或减 1，然后将其分配为新类。

【解决方案2】：

这解决了您的问题并清理了您的代码：

function pageSliderBack(){     
    var pDiv = $('#slidecarousel');
    if ( pDiv.hasClass("p1") ) pDiv.removeClass("p1").addClass("p5");
    else if ( pDiv.hasClass("p2") ) pDiv.removeClass("p2").addClass("p1");
    else if ( pDiv.hasClass("p3") ) pDiv.removeClass("p3").addClass("p2");
    else if ( pDiv.hasClass("p4") ) pDiv.removeClass("p4").addClass("p3");
    else if ( pDiv.hasClass("p5") ) pDiv.removeClass("p5").addClass("p4");
    else pDiv.addClass("SlideErr");    
}

干杯

【讨论】：

@DaMaxContent 欢迎。很高兴它帮助了你:)
干杯，来自玻利维亚拉巴斯

【解决方案3】：

在您的函数pageSliderBack 中，您使用的是jquery 元素，即$('#slidercarousel')，但使用普通javascript 设置className

查看jQuery className woes

改为使用

pDiv.attr("class", 'p5'); or use pDiv.addClass('p5')

【讨论】：