Question

我已经检查了我的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";
    }
}

Answer 1

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

pDiv[0].className = "p5";

DEMO

Answer 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");    
}

干杯

Answer 3

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

检查jQuery className woes

改为使用

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

更改类功能不起作用

3 个答案: