Question

我有这个数组

var sizes =[
            ['300x250', 0],
            ['160x600', 0],
            ['728x90', 0],
            ['300x600', 0] 
        ];

我有很多复选框，我希望当我选择一个增量数组上的值时，如果我取消选择减去该值。

直到现在我有了这个

var $checkboxes = $('#addA td input[type="checkbox"]');
    $checkboxes.change(function () {
    var checkedValue = document.querySelector('.checkbox:checked').value;
                    var ss = $(this).attr('value').split('_')[0];
                    console.log(ss);
     });
});

我使用了分割，因为大小是复选框值。

所以，我选择复选框值为“300x250_aaaaaa”我将值增加到1 我选择另一个复选框值为“300x250_fdsfds”我增加值，所以我总共2。我选择另一个值为“300x600_fdsssfds”的复选框，我将值1递增。如果我未被选中，我必须减少。在这个例子中，我的最终数组应该是这样的：

var sizes =[
                ['300x250', 2],
                ['160x600', 0],
                ['728x90', 0],
                ['300x600', 1] 
            ];

在数组上我有所有可能的值我的HTML表格

<table id="add-a" class="ad dataTable no-footer" style="width: 1500px;" role="grid">
<thead>
  <tr role="row">
<th align="" class="sorting_asc" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Add?: activate to sort column descending" style="width: 59px;">Add?</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 94px;"> ID</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="Size: activate to sort column ascending" style="width: 247px;">Size</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_7a53936d" class="checkbox" name="checkbox[]" value="300x250_zzzzz" class="r1"></p></b></td>
    <td align="left" class="center">1</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even" style="background: navajowhite;">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_fd6cb3e4" class="checkbox" name="checkbox[]" value="300x250_aaaa" class="r1"></p></b></td>
    <td align="left" class="center">2</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_503dd438" class="checkbox" name="checkbox[]" value="300x250_bbbb" class="r1"></p></b></td>
    <td align="left" class="center">3</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_d68b36ad" class="checkbox" name="checkbox[]" value="300x250_cccc" class="r1"></p></b></td>
    <td align="left" class="center">4</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_dd7ff4ea" class="checkbox" name="checkbox[]" value="300x250_dddd" class="r1"></p></b></td>
    <td align="left" class="center">5</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_456f96f3" class="checkbox" name="checkbox[]" value="300x250_eeee" class="r1"></p></b></td>
    <td align="left" class="center">6</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_09c16d50" class="checkbox" name="checkbox[]" value="300x250_ffff" class="r1"></p></b></td>
    <td align="left" class="center">7</td>
    <td align="left" class="center">300x250</td>
  </tr></tbody>

Answer 1

为什么不使用对象？

var sizes={
 320x200: 0
}

然后你可以用以下内容增加它：

var ss = $(this).attr('value').split('_')[0];
sizes[ss] += 1;

Answer 2

您应该使用Object代替数组，而不是使用value.split，您可以使用data代码（data-value="320x200"）。

以下是描述相同的代码。

JSFiddle

＆＃13;

var data = {
  '300x250': 0,
  '160x600': 0,
  '728x90': 0,
  '300x600': 0
}

function createCheckBoxes() {
  var _testKeys = ["a", "b", "c", "d"];
  var html = "";
  var keys = Object.keys(data)

  _testKeys.forEach(function(item) {
    html += "<div class='group'>";
    html += "<h3>" + item.toUpperCase() + "</h3>"

    for (var i = 0; i < keys.length; i++) {
      html += "<input type='checkbox' data-value='" +
        keys[i] + "' class='chk' value=" + keys[i] + "_" + item + "/>" + keys[i];
    }

    html += "</div>"
  });

  $("#content").html(html);
}

function registerEvents() {
  // $(".checkbox").on("change", function() {   // With your html
  $(".chk").on("change", function() {
    
    // Consider only increment operation and set -ve value to decrement.
    var value = $(this).is(":checked") ? 1 : -1;
    
    // You can use you "value.split()" if not comfortable with data-value
    var key = $(this).data("value");
    console.log(key, value);
    
    // Update Value
    data[key] += value;
    printData();
  });
}

function printData() {
  $("#result").html(JSON.stringify(data, " ", 4));
}

createCheckBoxes();
registerEvents();

＆＃13;

.group {
  margin: 5px;
  padding-left: 10px;
  border: 1px solid gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="result"></div>
<div id="content"></div>

＆＃13;

选中复选框时的增量变量

2 个答案: