Question

我有图标列表，当我点击图标时，将类名更改为“icMark2”，再次点击时更改“icMark3”。默认类名是“icMark1”，总共有4个类。

所以我尝试过，但我在处理ID列表方面遇到了麻烦。

实际上有很多图标项目.. 我如何修复代码？

这是示例，当您看到这一点时，只有第一项有效。

http://fiddle.jshell.net/bR2Y2/2/

请帮助我~~

    <span class="icMark">
     <a href="#" class="icMark1" id="list1"></a> <!-- icMark1 ~ icMark4 -->
     </span> 

    <span class="icMark">
     <a href="#" class="icMark1" id="list2"></a> <!-- icMark1 ~ icMark4 -->
     </span> 

    <span class="icMark">
     <a href="#" class="icMark1" id="list3"></a> <!-- icMark1 ~ icMark4 -->
     </span> 


<style>
    span {display:block; margin:0 0 20px 0; }
    span a { display:block; width:30px; height:30px; }

    .icMark1 {background:gray }
    .icMark2 {background:blue }
    .icMark3 {background:red }
    .icMark4 {background:green }

    </style>

<script>
    var classes = new Array("icMark1","icMark2","icMark3","icMark4");
                var idx = 0;

                $("#list1").on("click", changeClass);

                function changeClass() {
                    idx++;
                    var nextClass = classes[idx % classes.length];
                    $("#list1").attr("class",nextClass);
                }



</script>

Answer 1

Working Demo

使用通用选择器 - 就像类选择器一样。在这种情况下，请点击.icMark a或span a
idx不会独立影响元素。使用 .indexOf()从数组中获取下一个类。

$(".icMark a").on("click", changeClass);

function changeClass() {
    var cclass = $(this).attr("class");
    var nextClass = classes[(classes.indexOf(cclass)+1) % (classes.length)];
    $(this).attr("class", nextClass);
}

Answer 2

尝试使用.data()，

var classes = new Array("icMark1", "icMark2", "icMark3", "icMark4");

$("#list1,#list2,#list3").on("click", changeClass);

function changeClass() {
    var no = $(this).data('no') || 1;
    var nextClass = classes[no % classes.length];
    $(this).attr("class", nextClass);
    no++;
    $(this).data('no', no);
}

DEMO

Answer 3

将一个名为list的类添加到所有元素

<a href="#" class="icMark1 list" id="list1"></a>

然后

var classes = new Array("icMark1", "icMark2", "icMark3", "icMark4");
$(".list").on("click", changeClass);

function changeClass() {
    var $this = $(this),
        //get the current class index, 0 by default
        idx = $this.data('idx') || 0;
    //remove the previous class
    $this.removeClass(classes[idx]);
    //find the new index
    idx = (idx + 1) % classes.length;
    //add the new class
    $this.addClass(classes[idx])
    //save the state
    $this.data('idx', idx);
}

演示：Fiddle

OR

var classes = new Array("icMark1", "icMark2", "icMark3", "icMark4");
$(".list").on("click", changeClass);

function changeClass() {
    var $this = $(this),
        idx = (($this.data('idx') || 0) + 1) % classes.length;
    $this.data('idx', idx);
    console.log(idx)
    $this.removeClass(classes.join(' ')).addClass(classes[idx])
}

演示：Fiddle

Answer 4

我不确定你究竟在寻找什么。如果要在单击第一个图标时更改所有图标的类，只需添加如下。

var classes = new Array（“icMark1”，“icMark2”，“icMark3”，“icMark4”）; var idx = 0;

        $("#list1").on("click", changeClass);

        function changeClass() {
            idx++;
            var nextClass = classes[idx % classes.length];
            $("#list1").attr("class",nextClass);
            $("#list2").attr("class",nextClass);
            $("#list3").attr("class",nextClass);
        }

或者，如果你想为所有图标分别进行onclick动作，那么就可以了拉贾帕布提到过。我不知道data（）的用途是什么。

Answer 5

这是一个观察原始类的答案，以防你想在页面加载时使用icMark3：

function changeClass(e) {
    e.preventDefault(); // don't forget this! doesn't matter in jsfiddle but...
    var idx = $(this).attr('class').replace('icMark', '');
    var nextClass = classes[idx % classes.length];
    $(this).attr("class", nextClass);
}

Fiddle

Answer 6

我修改了您的小提琴，请点击此处Fiddle

<span class="icMark">
 <a href="#" class="icMark1 list"></a> 
</span> 


 <span class="icMark">
 <a href="#" class="icMark1 list"></a> 
 </span> 

<script>
var classes = new Array("icMark1","icMark2","icMark3","icMark4");
        var idx = 0;

        $(".list").on("click", changeClass);

        function changeClass() {
            idx++;
            var nextClass = classes[idx % classes.length];
            $(this).attr("class",nextClass);
        }
</script>

Answer 7

在代码中做了一些小改动

尝试以下方法：

     var classes = new Array("icMark1","icMark2","icMark3","icMark4");
 var idx = 0;

 $("span.icMark a").on("click", changeClass);


 function changeClass() {
            if($(this).hasClass("icMark1")){alert("fd");
              $(this).switchClass("icMark1","icMark2");   
            }else if($(this).hasClass("icMark2")){
                 $(this).switchClass("icMark2","icMark3");   
            }else if($(this).hasClass("icMark3")){
                 $(this).switchClass("icMark3","icMark4");   
            }else {
                  $(this).switchClass("icMark4","icMark1"); 
            }

}

Nb：包含jquery和jquery ui库

单击时如何更改类名？

7 个答案:

Working Demo

DEMO

DEMO