Question

我正在使用引导程序来实现轮播。在轮播中，我有一些信息，例如名字，姓氏和地址。信息可能越来越少。这些也将是名字，也将是名字，姓氏和地址。在轮播中，我也有一个提交按钮。单击提交按钮时，我想从子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

$("button").click(function(){
    $(this).parent().find("input").each(function(){
        // Code here
        console.log($(this).val());
    });
});

以防万一，您只想访问单击的父按钮的元素，否则可以使用$(".carousel-inner .item.active")做同样的技巧，例如@ harshit-gupta的答案

$('#myCarousel .carousel-indicators li.active')
$('#myCarousel').on('slid.bs.carousel', function (e) {
    var ele = $('#myCarousel .carousel-indicators li.active');
    console.log('target: ' + ele.data('target') + 
                ' value: ' + ele.data('value') + 
                ' slide-to: ' + ele.data('slideTo'));
})

$("button").click(function(){
	$(this).parent().find("input").each(function(){
  	// Code here
    console.log($(this).val());
  });
  
});

.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>
          Maria
          </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>
          Maron
          </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>
          sharon
          </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>

Answer 2

在输入的.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)
})

我也在https://jsfiddle.net/r3c8z5an/

上更新了小提琴

Answer 3

您可以简单地使用每个值并获取所有值

  var documentHistories = docHistory
    .OrderByDescending(c => c.CreatedOn)
    .ThenByDescending(c => c.ModifiedOn)
    .ToList();

希望这会有所帮助

Answer 4

尝试一下：

transform()

它会找到活动轮播项目中的所有输入字段（显然会单击“提交”按钮）。

单击提交后如何从当前活动的轮播中获取所有输入值？

4 个答案: