Question

在下面的代码段中，我正在检查数据属性cal-choice，然后在追加到pg-img-review之前删除一个类。我弄清楚的问题是如何只显示当前的选择。如果选中一个框然后取消选中它，文本仍然保留。

另一件事是我只想显示一个，但将复选框保留为复选框（不是单选按钮）。

有人看到我做错了什么或需要做什么吗？

＆＃13;

$('body').on('change', '.option-check', function() {
  var lim = 1;
  var calPrevImg = [];
  $('.option-check:checked').each(function() {
    calPrevImg.push($($(this).data('cal-choice')));
    for (var i = 0, len = calPrevImg.length; i < len; i++) {
      calPrevImg[i].removeClass('cal-selected-img').appendTo('#pg-img-review');
    }
  });
});

＆＃13;

.cal-selected-img {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>">
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>
Goodbye</div>">
<div id="pg-img-review"></div>

＆＃13;

Answer 1

我重新安排了一些代码。我添加了擦除当前内容，然后我移动了for循环以避免重复添加。我90％肯定这是期望的行为，如果不是则评论。

$('body').on('change', '.option-check', function() {
  var lim = 1;
  var calPrevImg = [];
  $('.option-check:checked').each(function() {
    calPrevImg.push($($(this).data('cal-choice')));
  });
  $('#pg-img-review').html("");
for (var i = 0, len = calPrevImg.length; i < len; i++) {
    calPrevImg[i].removeClass('cal-selected-img').appendTo('#pg-img-review');
  }
});

.cal-selected-img {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>">
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>
Goodbye</div>">
<div id="pg-img-review"></div>

在appendTo中仅显示数组的当前选择

1 个答案: