How To Use Arrows To Cycle Through Classes?

Question

My goal is to cycle through different fonts with the click of an arrow. I just started learning Javascript and jQuery, but I found the jQuery in another thread, and changed the parts I understood.

I get the jist of how this is working, but I don't know what to change $('.p1, .p2, .p3').click(function() to to make this work. I imagine this.classNameis part of the issue as well. Any help or direction is appreciated!

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];
});

Shouldn't you have your click handler on the arrow DIVs, not `p1`? — Barmar, May 05 '15 at 00:31

score 1 · Answer 1 · answered May 05 '15 at 00:40

I think you need

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])
});

Demo: Fiddle

score 1 · Accepted Answer · answered May 05 '15 at 00:41

The click handler should be on the arrow DIVs, not the pX DIVs. Then it can loop through the pX DIVs with .each, updating all their classes:

$(".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];
    });
});

score 1 · Answer 3 · answered May 05 '15 at 00:50

1

Less 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);
});

answered May 05 '15 at 00:50

ddanone

464
4
8

Nice!! Very clean and easy to understand. In the case `#display` was not there, what would you do differently on the last line? I have no intentions of removing it, I'm just curious – CSS Apprentice May 05 '15 at 03:02
Also, what would I need to change to make this work with multiple `p1` classes? http://jsfiddle.net/CSS_Apprentice/dL8tvqy9/4/ – CSS Apprentice May 05 '15 at 06:33
1

Edited your last [Fiddle](https://jsfiddle.net/ddanone/dL8tvqy9/5/). There can only be one id with the same name, also note you can put more than one class to an element so their styles will be added. – ddanone May 05 '15 at 06:44

How To Use Arrows To Cycle Through Classes?

3 Answers3