Question

我需要jQuery（或JavaScript）的帮助。我有一个带有三个复选框相似元素的表单。想要获取描述文本和输入值，以便通过AJAX表单发送数据。 Ajax工作得非常好，但我无法前往DOM来获取我想要的数据。

＆＃13;

$('.select-item').on('click', function() {
	
   $(this).toggleClass('active');

})

var activeItems = $('.select-item.active');

for( var i = 0, l = activeItems.length; i < l; i++ ) {

  console.log( activeItems[i].children[1] );  
    
  console.log( activeItems[i].children[2] );

}

＆＃13;

.select-item {
    background-color: #f7f7f7;
    margin-bottom: 20px;
    padding: 15px;
}
.selector {
    height: 20px;
    width: 20px;
    border: 1px solid blue;
    position: relative;
}
.selector .circle {
    height: 10px;
    width: 10px;
    background-color: blue;
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0;
}
.active .selector .circle {
    opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="ticket-booking-form-1">
    <div class="select-item active">
        <!-- SELECTION ITEM -->
        <div class="selector">
            <div class="circle"></div>
        </div>
        <div class="description">
            	<h4 class="title-text">Day 1 Full Day Ticket  <span class="text-color">$129</span></h4>

        </div>
        <div class="select-input">
            <label for="qty-1">QTY</label>
            <input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
        </div>
    </div>
    <div class="select-item">
        <!-- SELECTION ITEM -->
        <div class="selector">
            <div class="circle"></div>
        </div>
        <div class="description">
            	<h4 class="title-text">Day 1 Full Day Ticket  <span class="text-color">$129</span></h4>

        </div>
        <div class="select-input">
            <label for="qty-1">QTY</label>
            <input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
        </div>
    </div>
    <div class="select-item">
        <!-- SELECTION ITEM -->
        <div class="selector">
            <div class="circle"></div>
        </div>
        <div class="description">
            	<h4 class="title-text">Day 1 Full Day Ticket  <span class="text-color">$129</span></h4>

        </div>
        <div class="select-input">
            <label for="qty-1">QTY</label>
            <input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
        </div>
    </div>
    <!-- /END SELECTION ITEM -->
    <button type="submit" class="btn btn-base btn-lg"><span>Proceed to Checkout</span>

    </button>
</form>

＆＃13;

场景是，应该将所选（已检查）元素的描述文本和输入值添加到数组或对象中，然后我可以发送所选（活动）元素的单个/两个/所有数据。实际上我不擅长JS所以如果你认为没有添加到数组或对象解决方案可以实现，完美！

http://jsfiddle.net/getanwar/t2d3sjmq/

一旦你看到小提琴会理解我的问题。

Answer 1

要获取有效输入的值，请使用

for( var i = 0, l = activeItems.length; i < l; i++ ) {
    console.log( activeItems[i].children[2].children[1].value );
}

使用JQuery，您可以使用类似

的内容

$('.select-item.active > .select-input').each( function(index,element){
    console.log( $(this).find('input').attr('value') );
});

前往活动元素的特定HTML元素

1 个答案: