Question

我正在尝试在缩略图部分中使用滑块后触发点击事件，我已经找到了单击时的方式，下一步然后返回，但是当我单击时，我需要触发“点击”事件m根据发生的“拖动”或“下一个/后退”事件进行更改。

我的代码：

$.view_travel_sight = {
  owl: null,

  owl_next: function() {
    $.view_travel_sight.owl.trigger('next.owl.carousel');
  },

  owl_back: function() {
    $.view_travel_sight.owl.trigger('prev.owl.carousel');
  },

  owl_carousel_change_photo: function(num) {
    console.log('click trigger');

    var active_photo = $('[data-photo-thumb-number="'+ num +'"]');
    var id = active_photo.attr("data-photo-thumb-number");
    var src_photo = active_photo.attr("data-img-src");
    var src_id = active_photo.attr("data-img-id");
    var src_alt = active_photo.attr("alt");

    $('#sights-big-picture').attr({
      'src' : src_photo
    });

    $('#photo-header').html($('#header-'+ src_id).html());
    $('#photo-description').html($('#description-'+ src_id).html());
  },

  owl_carousel_hadnler: function() {
    $.view_travel_sight.owl = $('.owl-carousel');

    $.view_travel_sight.owl.children().each( function( index ) {
      $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
    });

    $.view_travel_sight.owl.owlCarousel({
      loop:true,
      center:true,
      margin:10,
      dots:false,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
      }
    });

    $.view_travel_sight.owl.on('click','.owl-item', function(event) {
      event.preventDefault();
      $.view_travel_sight.owl_carousel_change_photo($(event.currentTarget.children[0]).data('index-num'));
    });

    $.view_travel_sight.owl.on('click','.owl-item>div', function(event) {
      $.view_travel_sight.owl.trigger('to.owl.carousel', $(this).data('position'));
    });

    $.view_travel_sight.owl.on('changed.owl.carousel', function(e) {
      console.log('changed!');
    });
  }
};

我的问题在这里的功能中

$.view_travel_sight.owl.on('changed.owl.carousel', function(e) {
    console.log('changed!');
});

Answer 1

我找到了关于我的问题的遮篷，以及它的唤醒功能：）

<?php
  echo '<div style="background-color: '.$color.'; width: 30px; height: 30px">'
?>

猫头鹰传送带2-触发点击事件时发生变化的问题

1 个答案: