Why Ternary Operator doesn't work with using 'hasClass'?

Question

I'm making my own slide plugin using jQuery for practice. The problem is, I don't know why but some reason ternary operator doesn't work. The slider only responses when user clicks prev button which registered as a condition from the code.

I expected it should move to right side when user presses next button, but next button is totally broken.

I could just make 2 different trigger buttons and use multiple if statements for solving this problem, but I want to merge it on single line by using ternary operator and minifise my code as much as I can.

How would I solve this problem?

Code block:

 (function($) { $.fn.sliderModule = function(options) { const defaults = { myGallery: $(this) }; var settings = $.extend({ myItems: null, trigger: null, current: null }, defaults, options); $(settings.trigger).on('click', function() { if (!(defaults.myGallery.is(':animated'))) { var movement = settings.trigger.hasClass('prev') ? -1 : 1 defaults.myGallery.animate({left: "+=" + (100 / settings.current) * movement + '%'}); // It doesn't respond the `next` button. }; }); }; })(jQuery); $(function() { $('#slide-list').sliderModule({ myItems: '#img-slider', trigger: $('#buttons').find('#button'), current: 4 }); }) 

 li { list-style-type: none; } #slide-container { position: relative !important; width: 1170px; margin: 0 auto; overflow: hidden; height: auto; } #slide-list { margin: 0 auto; position: relative; display: flex; width: 1170px; } #buttons { width: 1170px; margin: 0 auto; display: flex; justify-content: center; } #buttons li { margin: 0 20px; } .slide-l-quarter { flex-shrink: 0; position: relative; white-space: nowrap; width: calc(100% / 4); } .slide-l-quarter img { width: 100%; height: auto; } 

 <div id="slide-container"> <ul id="slide-list"> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/PVsHlX9.jpg" alt=""> </li> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/WfWhNnU.jpg" alt=""> </li> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/eqHdnNs.jpg" alt=""> </li> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/0jziABY.jpg" alt=""> </li> </ul> </div> <ul id="buttons"> <li id="button" class="prev">Prev</li> <li id="button" class="next">Next</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

There is no problem with using ternary operators. But you made some mistakes along the way.

IDs must be unique

You cannot have this in your HTML:

<li id="button" class="prev">Prev</li>
<li id="button" class="next">Next</li>

If you need multiple elements to have the same selector, use a class instead:

<li class="button prev">Prev</li>
<li class="button next">Next</li>

settings.trigger selects both buttons

When you do this:

settings.trigger.hasClass('prev')

You're refering to both buttons. You only want the one clicked by the user:

$(this).hasClass('prev')

Fixed version

 (function($) { $.fn.sliderModule = function(options) { const defaults = { myGallery: $(this) }; var settings = $.extend({ myItems: null, trigger: null, current: null }, defaults, options); $(settings.trigger).on('click', function() { if (!(defaults.myGallery.is(':animated'))) { var movement = $(this).hasClass('prev') ? -1 : 1; defaults.myGallery.animate({left: "+=" + (100 / settings.current) * movement + '%'}); }; }); }; })(jQuery); $(function() { $('#slide-list').sliderModule({ myItems: '#img-slider', trigger: $('#buttons').find('.button'), current: 4 }); }) 

 li { list-style-type: none; } #slide-container { position: relative !important; width: 1170px; margin: 0 auto; overflow: hidden; height: auto; } #slide-list { margin: 0 auto; position: relative; display: flex; width: 1170px; } #buttons { width: 1170px; margin: 0 auto; display: flex; justify-content: center; } #buttons li { margin: 0 20px; } .slide-l-quarter { flex-shrink: 0; position: relative; white-space: nowrap; width: calc(100% / 4); } .slide-l-quarter img { width: 100%; height: auto; } 

 <div id="slide-container"> <ul id="slide-list"> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/PVsHlX9.jpg" alt=""> </li> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/WfWhNnU.jpg" alt=""> </li> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/eqHdnNs.jpg" alt=""> </li> <li class="slide-l-quarter" id="image-slider"> <img src="https://i.imgur.com/0jziABY.jpg" alt=""> </li> </ul> </div> <ul id="buttons"> <li class="button prev">Prev</li> <li class="button next">Next</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>