jQuery从猫头鹰轮播当前滑块获取文本框值答案

【问题标题】：jQuery get textbox value from owl carousel current sliderjQuery从猫头鹰轮播当前滑块获取文本框值
【发布时间】：2016-01-11 07:11:01
【问题描述】：

我正在使用owl carousel jQuery 图像滑块，我想从当前滑块中获取文本框值。我添加了单击事件以从当前滑块获取文本框值，但不知道如何从中读取。

知道怎么做吗？

这是我的 JSFiddle：http://jsfiddle.net/8bJUc/575/

HTML：

<div id="dino-example" class="dino-carousel">
  <div class="item">
    <img src="http://johntomsett.files.wordpress.com/2014/03/14525_1_v12_tp.jpg" alt="dinosaur1"></img>
    <input type="text" class="inv" value="1">
  </div>
  <div class="item">
    <img src="http://images.clipartpanda.com/t-rex-dinosaur-clip-art-T-Rex-Dinosaur_1.png" alt="dinosaur2"></img>
    <input type="text" class="inv" value="2">
  </div>
  <div class="item">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQbuwkU3kDpr4rByYQ3ydbTPv6zP1L0yhrKB00fa5YhkY0i9WKFWA" alt="dinosaur3"></img>
    <input type="text" class="inv" value="3">
  </div>
  <div class="item">
    <img src="http://content.animalnewyork.com/wp-content/uploads/new-dinosaur-nasutoceratops.jpg" alt="dinosaur4"></img>
    <input type="text" class="inv" value="4">
  </div>
</div>

<div>
  <a href="#" class="get">Get value from textbox</a>
</div>

jQuery:

$(document).ready(function() {

  $("#dino-example").owlCarousel({
    items: 5,
    singleItem: true
  });

});

$(document.body).on('click', '.get' ,function(){
    alert('hey');
});

【问题讨论】：

Demo

标签： javascript jquery html slider owl-carousel

【解决方案1】：

DEMO

利用owlCarousel 的afterMove 选项并将active 类设置为当前活动的element，然后在click 上找到element 和活动的class，如下所示：

$(document).ready(function() {
  $("#dino-example").owlCarousel({
    items: 5,
    singleItem: true,
    afterMove: function (elem) {
      $(".owl-item").removeClass('active'); //remove it from every item
      var current = this.currentItem; //get currentItem
      $(elem).find(".owl-item").eq(current).addClass('active'); //add active class
    }
  });
  $(".owl-item:first").addClass('active'); //add active class to first owl-item on DOM ready
});

$(document.body).on('click', '.get' ,function(){
    var ipVal=$(".owl-item.active").find('input[type=text]').val();
    //find input present in active item and get its value
    alert(ipVal);
});

【讨论】：

【解决方案2】：

当它们被点击时，class active 被添加到 owl 页面图标中。您可以获取活动元素的索引以定位当前幻灯片：

var owl_item =  $('.owl-item');
$(document.body).on('click', '.get' ,function(){
   var selectedindex = $('div.active').index();
   alert(owl_item.eq(selectedindex).find(':text').val());
});

Working Demo

【讨论】：

【解决方案3】：

你能使用 owlCarousel API，它非常简洁。它可以在 1 或 2 行内完成工作。

$(document.body).on('click', '.get' ,function(){
  var dino = $("#dino-example").data('owlCarousel');
  alert($($('.owl-item')[dino.visibleItems]).find('input[type=text]').val());
});

在第一行中，我们将轮播的数据分配给变量名称“dino”。在第二行中，取决于项目的班级名称并考虑到每张幻灯片显示 1 个。我们获取 'visibleItems' 数组的第一项并查找具有值的文本字段。

希望有帮助！

【讨论】：