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

【问题标题】：how can i know which options are selected each loop我怎么知道每个循环选择了哪些选项
【发布时间】：2017-01-04 15:06:18
【问题描述】：

<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 ...当我选择一个选项时，我添加以下内容类“方形选项选择”

添加了来自 cmets 的说明

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

只有第 1 组的数量元素，然后如果我选择所有选项第 2 组的第 2 组数量元素应该是 1。

【问题讨论】：

请发布您遇到问题的代码，以便我们查看问题可能是什么。 - 另外，我不明白你想要达到什么目的。您是否要检查所选option 元素属于哪个quantity 元素？如果您在每个“组”中选择了 1 个，那您期望什么？
在每组中我有n个选项，如果您选择所有选项，则每组中的数量必须更改为1
如果我选择第 1 组中的所有选项，您是否希望将 all quantity 元素的 data-index 设置为 1 或仅将 quantity 元素设置为第 1 组？ - 如果是这样，您应该能够使用您之前使用sibling 选择器发布的代码来解决此问题。
只有第1组的数量元素，那么如果我选择第2组中的所有选项，第2组的数量元素应该是1

标签： javascript jquery frontend

【解决方案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)
            }               
        }
    });
});

我知道了，但只有在您选择最后一个孩子时才有效

【讨论】：

【解决方案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 : '');
});

$(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 : '');
  });
});

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

<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>

补充Plunker

【讨论】：