user1422434 user1422434 - 3 months ago 14
HTML Question

Horizontal menu selectable items with arrows buttons

Im making a menu where you can select the item clicking on them or moving around using arrow items in the menu. Well. I mark selected items using a selected class in the set recovered with this selector:

$('.mainSlider li:not(.leftBounce,.rightBounce)'); //All li items inside mainSlider without leftBounce and rightBounce classes


Problem was that leftBounce and rightBounce arrow items are marked too (They dont appear in the previous set so Im confused about this).

I have the next with the items.

<ul>
<li class="leftBounce"><span class="spanBig"> < </span></li>
<li><span class="spanBig">A</span><span class="spanMedium">ROW</span><span class="spanMedium">GREENS</span></li>
<li><span class="spanBig">B</span><span class="spanMedium">ROW</span><span class="spanMedium">LIGHTS</span></li>
<li><span class="spanBig">C</span><span class="spanMedium">ROW</span><span class="spanMedium">GOLD/BROWN</span></li>
<li><span class="spanBig">D</span><span class="spanMedium">ROW</span><span class="spanMedium">BLUE</span></li>
<li><span class="spanBig">E</span><span class="spanMedium">ROW</span><span class="spanMedium">BLACK</span></li>
<li class="rightBounce"><span class="spanBig"> > </span></li>
</ul>


I have the next JS Code:

var mainli = $('.mainSlider li:not(.leftBounce,.rightBounce)');
var mainliSelected;
var mainLeftBounce = $('.mainSlider .leftBounce');
var mainRightBounce = $('.mainSlider .rightBounce');

/* Main Right Navigation*/
mainRightBounce.click(function(){
if(mainliSelected){
mainliSelected.removeClass('selected');
next = mainliSelected.next();
if(next.length > 0){
mainliSelected = next.addClass('selected');
}else{
mainliSelected = mainli.eq(0).addClass('selected');
}
}else{
mainliSelected = mainli.eq(0).addClass('selected');
}
});
/* Main Right Navigation*/

/* Main Left Navigation*/
mainLeftBounce.click(function(){
if(mainliSelected){
mainliSelected.removeClass('selected');
next = mainliSelected.prev();
if(next.length > 0){
mainliSelected = next.addClass('selected');
}else{
mainliSelected = mainli.last().addClass('selected');
}
}else{
mainliSelected = mainli.last().addClass('selected');
}
});
/* Main Left Navigation*/


Here a fiddle with the example:
https://jsfiddle.net/zomoxp9L/

Answer

Do only two things and it will work as expected:

In main right navigation function:

next = mainliSelected.next().not('.rightBounce');

In main left navigation function

 next = mainliSelected.prev().not('.leftBounce');

See updated fiddle: https://jsfiddle.net/zomoxp9L/