Question

<div class="nav" data-index="0">
 <a class="square_option">List 1, item 1</a>
 <a class="square_option">List 1, item 2</a>
 <a class="square_option">List 1, item 3</a>
 <a class="square_option">List 1, item 4</a>
 <input class="quantity" type="text" data-index="0"/>
</div>
<div class="nav" data-index="1">
 <a class="square_option">List 2, item 1</a>
 <a class="square_option">List 2, item 2</a>
 <a class="square_option">List 2, item 3</a>
 <input class="quantity" type="text" data-index="1"/>
</div>
<div class="nav" data-index="2">
 <a class="square_option">List 3, item 1</a>
 <input class="quantity" type="text" data-index="2"/>
</div>

我如何知道当我选择前4个选项时，data-index="0"中的数量为1，当我选择以下3个选项时，data-index="1"中的数量为1 ...当我选择一个选项时我添加以下类＆＃34; square-option-select＆＃34;

添加了评论的说明

在每个组中，如果您选择全部，我有n个选项   每个组中数量必须更改为1的选项。

只有组1的数量元素，如果我选择了所有选项   第2组的第2组数量元素应为1。

Answer 1

$('.nav').each(function(index_block, item_block){   
    $('.square_option', this).on('click', function(index_opcion, item_opcion){
        if($(this).hasClass('square-option-select')){                           
            if(index_opcion == 3 && index_block == 0){                                      
                $('.quantity[data-index="' + index_block + '"]').val(1)                 
            } else if(index_opcion == 2 && index_block == 1){
                $('.quantity[data-index="' + index_block + '"]').val(1)
            } else if(index_opcion == 0 && index_block == 2){
                $('.quantity[data-index="' + index_block + '"]').val(1)
            }               
        }
    });
});

我得到了这个，但只有在你选择最后一个孩子时才有效

Answer 2

在每个组中，我有n个选项，如果您选择所有选项，数量必须更改为1，在每个组中

下面有很多更好，更优雅的方法可以做到这一点，但你应该能够采用那个有效的例子并让它在你自己的代码中运行。

您可以使用与此类似的siblings来执行此操作：

$('.square_option').on('click', function() {
    var $currentOption = $(this);
    $currentOption.toggleClass('square-option-select');

    var allOptions = $currentOption.siblings('.square_option').add($currentOption);

    var selectedOptions = allOptions.filter(function() {
        return $(this).hasClass('square-option-select')
    });

    var quantity = $currentOption.siblings('.quantity').eq(0);
    var allSelected = allOptions.length === selectedOptions.length;

    quantity.val(allSelected ? 1 : '');
});

＆＃13;

$(document).ready(function() {
  $('.square_option').on('click', function() {
    var $currentOption = $(this);
    $currentOption.toggleClass('square-option-select');

    var allOptions = $currentOption.siblings('.square_option').add($currentOption);

    var selectedOptions = allOptions.filter(function() {
      return $(this).hasClass('square-option-select')
    });

    var quantity = $currentOption.siblings('.quantity').eq(0);
    var allSelected = allOptions.length === selectedOptions.length;

    quantity.val(allSelected ? 1 : '');
  });
});

＆＃13;

.square_option {
  display: block;
}
.square-option-select {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" data-index="0">
  <a class="square_option">List 1, item 1</a>
  <a class="square_option">List 1, item 2</a>
  <a class="square_option">List 1, item 3</a>
  <a class="square_option">List 1, item 4</a>
  <input class="quantity" type="text" data-index="0" />
</div>
<div class="nav" data-index="1">
  <a class="square_option">List 2, item 1</a>
  <a class="square_option">List 2, item 2</a>
  <a class="square_option">List 2, item 3</a>
  <input class="quantity" type="text" data-index="1" />
</div>
<div class="nav" data-index="2">
  <a class="square_option">List 3, item 1</a>
  <input class="quantity" type="text" data-index="2" />
</div>

＆＃13;

其他Plunker

我怎么知道每个循环选择了哪些选项

2 个答案: