为什么三元运算符不能使用 'hasClass'？

Question

我正在使用 jQuery 制作自己的幻灯片插件进行练习。问题是，我不知道为什么，但由于某些原因三元运算符不起作用。滑块仅在用户单击 prev 按钮时响应，该按钮在代码中注册为条件。

我预计当用户按下 next 按钮时它应该移动到右侧，但是 next 按钮完全坏了。

我可以制作 2 个不同的触发按钮并使用多个 if 语句来解决这个问题，但我想通过使用三元运算符将它合并到一行中并尽可能地缩小我的代码。

我该如何解决这个问题？

代码块：

(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

使用三元运算符没有问题。但是你一路上犯了一些错误。

ID 必须是唯一的

你的HTML不能有这个：

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

如果您需要多个元素具有相同的选择器，请改用 class：

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

`settings.trigger` 选择两个按钮

当你这样做时：

settings.trigger.hasClass('prev')

您指的是两个按钮。您只想要用户点击的那个：

$(this).hasClass('prev')

固定版本

(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>

为什么三元运算符不能使用 'hasClass'？

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

html

javascript

jquery

plugins

slide

ID 必须是唯一的

`settings.trigger` 选择两个按钮

固定版本

为什么三元运算符不能使用 'hasClass'？

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

html

javascript

jquery

plugins

slide

ID 必须是唯一的

settings.trigger 选择两个按钮

固定版本

`settings.trigger` 选择两个按钮