Не могу переключать флажок через его метку, когда `loop` истинно - PullRequest
Новая
       9

Не могу переключать флажок через его метку, когда `loop` истинно

0 голосов
/ 28 января 2019

Когда я делаю карусель с параметром loop, установленным на true, невозможно установить флажок, щелкнув на ярлыке, связанном с ним.

Вот пример с обеими ситуациями: 

let $carousel = $('.owl-carousel');

$carousel.owlCarousel({
  items: 1,
  loop: true,
});

document
  .querySelector('#btnReloadWithoutLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = false;
    $carousel.trigger('refresh.owl.carousel');
  });

document
  .querySelector('#btnReloadWithLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = true;
    $carousel.trigger('refresh.owl.carousel');
  });
* {
  font-family: sans-serif;
}

.owl-carousel .item {
  border: 1px solid #ccc;
  max-width: 400px;
  margin: auto;
  padding: 20px;
}

.owl-carousel .item label {
  transition: text-shadow .15s ease-in-out;
}

.owl-carousel .item input[type="checkbox"]:checked+label {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-group {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.btn-group>button+button {
  margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item">
    <form>
      <input type="checkbox" name="test" id="test-checkbox">
      <label for="test-checkbox">Test label</label>
    </form>
  </div>
  <div class="item">
    <form>
      <input type="checkbox" name="test" id="test-checkbox-2">
      <label for="test-checkbox-2">Test label</label>
    </form>
  </div>
</div>

<div class="btn-group">
  <button id="btnReloadWithoutLoop">
    Reload WITHOUT the loop option
  </button>
  <button id="btnReloadWithLoop">
    Reload WITH the loop option
  </button>
</div>

1 Ответ

0 голосов
/ 28 января 2019

Добавление прослушивателя событий щелчка к document.body показывает, что нажатие на метку регистрирует события двух щелчков .Кажется, что плагин карусели может также запускать событие click для флажка, используя атрибут for метки, вызывая немедленное состояние checked="checked" до checked="false".

Вы можете обойти этоэто путем добавления input внутри label [1] и удаления атрибута for метки.При этом плагин не запускает событие «двойного» нажатия.

Краткий ответ

Изменение: 

<form>
    <input type="checkbox" name="test" id="test-checkbox">
    <label for="test-checkbox">Test label</label>
</form>

Кому: 

<form>
    <label>
        <input type="checkbox" name="test" id="test-checkbox-2">
        Test label
    </label>
</form>

Полный ответ: 

let $carousel = $('.owl-carousel');

$carousel.owlCarousel({
  items: 1,
  loop: true,
});

document
  .querySelector('#btnReloadWithoutLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = false;
    $carousel.trigger('refresh.owl.carousel');
  });

document
  .querySelector('#btnReloadWithLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = true;
    $carousel.trigger('refresh.owl.carousel');
  });
* {
  font-family: sans-serif;
}

.owl-carousel .item {
  border: 1px solid #ccc;
  max-width: 400px;
  margin: auto;
  padding: 20px;
}

.owl-carousel .item label {
  transition: text-shadow .15s ease-in-out;
}

.owl-carousel .item input[type="checkbox"]:checked+label {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-group {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.btn-group>button+button {
  margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item">
    <form>
      <label>
        <input type="checkbox" name="test" id="test-checkbox">
        Test label
      </label>
    </form>
  </div>
  <div class="item">
    <form>
      <label>
        <input type="checkbox" name="test" id="test-checkbox-2">
        Test label
      </label>
    </form>
  </div>
</div>

<div class="btn-group">
  <button id="btnReloadWithoutLoop">
    Reload WITHOUT the loop option
  </button>
  <button id="btnReloadWithLoop">
    Reload WITH the loop option
  </button>
</div>
...