Question

我必须将以switchfrom-开头的CSS类的前缀更改为switchto-

我得到了它的工作，但我面临的问题是，以switchfrom-开头的同一个元素有两个或更多个类

当你在这里查看我的代码时，问题会很清楚： http://jsfiddle.net/9as1ddra/4/

上述代码更改switchfrom-div1和switchfrom-div2，但不更改switchfrom-mar

＆＃13;

    (function($) {
        $.fn.clickToggle = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function() {
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }(jQuery));
        
    $('button#ToggleUI').clickToggle(function() {   
        var switchfrom = $('[class^="switchfrom-"]');
        switchfrom.each(function(index){
            $(this).attr("class",this.className.replace(/switchfrom-/gi,'switchto-'));
    });
    },
    function() {
        var switchto = $('[class^="switchto-"]');
        switchto.each(function(index){
            $(this).attr("class",this.className.replace(/switchto-/gi,'switchfrom-'));
        });
    });

＆＃13;

.switchfrom-div1 {
    width:100px;
    height:100px;
    background:#ff0;
    border:1px solid #000;
}
        
.switchfrom-div2 {
    width:100px;
    height:100px;
    background:white;
    border:1px solid #000;
}
        
.switchto-div1 {
    width:100px;
    height:100px;
    background:green;
    border:1px solid #000;
}
        
.switchto-div2 {
    width:100px;
    height:100px;
    background:blue;
    border:1px solid #000;
}

.switch-from-mar {
    margin-left:10px;
}

.switch-to-mar {
    margin-left:0px;
}
.left {
    float:left;
}
        
.right {
    float:right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="switchfrom-div1 switch-from-mar left"> test1 </div>
<div class="switchfrom-div2 left"> test2 </div>
<br /><br /><br /><br /><br /><br /><br />
<div class="left">
    <button id="ToggleUI" style="width:200px;height:50px;">Toggle</button>
</div>

＆＃13;

Answer 1

因为$('[class^="switchfrom-"]')没有定位.switch-from-mar。

您正在寻找以switchfrom开头的课程，switch-from-mar在-和switch之间有from。

将您的班级更改为switchfrom-mar，它应该有效。或者，如果您想保留CSS类，则需要在查询中包含switch-from。

JS Fiddle

查找元素上多个类的前缀，并将前缀切换到所有这些类

1 个答案: