Question

我的目标是通过点击箭头循环浏览不同的字体。我刚开始学习Javascript和jQuery，但是我找到了jQuery in another thread，并改变了我理解的部分。

我得到了关于它如何工作的问题，但我不知道要改变$('.p1, .p2, .p3').click(function()要使其工作的内容。我想this.className也是问题的一部分。任何帮助或方向表示赞赏！

的jsfiddle： http://jsfiddle.net/CSS_Apprentice/dL8tvqy9/2/

HTML：

<div>
    <div class="leftArrow"></div>
    <div class="rightArrow"></div>
</div>

<div class="p1"></div>

jQuery的：

$('.p1, .p2, .p3').click(function() {                             
    this.className = {
       p3 : 'p1', p1: 'p2', p2: 'p3'
    }[this.className];
});

Answer 1

我认为你需要

var classes = ['p1', 'p2', 'p3'];
//register the handlers to the arrows
$('.leftArrow, .rightArrow').click(function () {
    var $el = $('#display'),
        $this = $(this);
    //get the current class of dispplay
    var index = classes.indexOf($el.attr('class'));

    //find out the next index of class
    if ($this.hasClass('leftArrow')) {
        index = index == 0 ? classes.length - 1 : index - 1;
    } else if ($this.hasClass('rightArrow')) {
        index = (index + 1) % classes.length;
    }

    //assign the class
    $el.attr('class', classes[index])
});

演示：Fiddle

Answer 2

点击处理程序应位于箭头DIV上，而不是pX DIV。然后它可以使用pX循环遍历.each DIV，更新所有类：

$(".leftArrow").click(function() {
    $(".p1, .p2, .p3").each(function() {
        this.className = {
           p3 : 'p1', p1: 'p2', p2: 'p3'
        }[this.className];
    });
});

$(".rightArrow").click(function() {
    $(".p1, .p2, .p3").each(function() {
        this.className = {
           p3 : 'p2', p1: 'p3', p2: 'p1'
        }[this.className];
    });
});

Answer 3

更少的javascript：Fiddle

<div class="center">
    <div class="leftArrow" data-value="-1"></div>
    <div class="rightArrow"  data-value="1"></div>
</div>
<div class="p1" id="display"></div>



var current=1;

$('.leftArrow,.rightArrow').click(function() {
    current += $(this).attr("data-value")*1;
    if(current<1) current=3;
    if(current>3) current=1;
    console.log(current);
    $('#display').attr('class','p'+current);
});

如何使用箭头循环通过类？

3 个答案: