javascript - 单击提交后如何从当前事件的轮播中获取所有输入值？

Question

我正在使用 Bootstrap 来实现轮播。在轮播中，我有一些信息，比如名字、姓氏和地址。信息可能多也可能少。这些也将是名字和名字，姓氏和地址。在轮播中我也有一个提交按钮。单击提交按钮时，我想从子 div 获取所有输入值。

$('#myCarousel .carousel-indicators li.active')
$('#myCarousel').on('slid.bs.carousel', function (e) {
    var ele = $('#myCarousel .carousel-indicators li.active');
    
})

.carousel-caption{
  position:static !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-value="A" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-value="B" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-value="C" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-value="C" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active text-center">
          <h1>
          John
          </h1>
            <div class="carousel-caption" style="margin-top:30px;">
            <div>
             Fiirst Name:<input type="text" style="color:#000">
            </div>
          <div>
           LastName:<input type="text" style="color:#000">
          </div>
           
                <h3>Los Angeles</h3>
                <p>LA is always so much fun!</p>
            </div>
             <button type="btn btn-sm button">submit</button>
        </div>

        <div class="item text-center">
            <h1>
          Amreo
          </h1>
            <div class="carousel-caption">
             <div>
             Fiirst Name:<input type="text" style="color:#000">
            </div>
          <div>
           LastName:<input type="text" style="color:#000">
          </div>
           <div>
           Address:<input type="text" style="color:#000">
          </div>
                <h3>Chicago</h3>
                <p>Thank you, Chicago!</p>
            </div>
             <button type="btn btn-sm button">submit</button>
        </div>

        <div class="item text-center">
            <h1>
          Kajuiew
          </h1>
            <div class="carousel-caption">
          <div>
             Fiirst Name:<input type="text" style="color:#000">
            </div>
          <div>
           LastName:<input type="text" style="color:#000">
          </div>
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
            </div>
             <button type="btn btn-sm button">submit</button>
        </div>
       
       
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

https://jsfiddle.net/varunPes/hnwyqu3v/20/

如何在 Javascript 中获取所有记录。

Answer 1

在 .first-name 和 .last-name 的输入上添加相应的类，并使用以下代码

$('#myCarousel').on('click', 'button', function(e) {
  var parent = $(e.target).parents('.item')
  var firstname = parent.find('.first-name').val();
  var lastname = parent.find('.last-name').val();
  console.log(firstname, lastname)
})

我还在这里更新了 fiddle https://jsfiddle.net/r3c8z5an/