Question

我设法实现了我想要的目标，但我似乎无法理解以下背后的逻辑：

HTML例如：

<input id="field-one" type="text" />
<ul class="clicks">
<li>15</li>
<li>20</li>
<li>30</li>
</ul>

和JQuery

$('.clicks li').bind('click', function(){
$(this).toggleClass('selected');

if($(this).hasClass('selected')) {
var numbers = $(this).html();
var joinNumbers = $('input#field-one').val().replace(/^,|,$/g, '').split(',');

joinNumbers.push(numbers);

$('input#field-one').val(joinNumbers.join());
} else {



}

}）;

我已经设法在您点击它们时添加数字。我想要实现的是能够在取消选择时删除数字。

例如，如果我点击15，我只想删除15，依此类推。

正如你所看到的，我正在检查选定的课程并在选中时执行代码，但我现在无法想到其他的解决方案，任何帮助都非常感谢，谢谢......

Here is working JsFiddle

Answer 1

＆＃13;

$('.clicks li').on('click', function() {
  $(this).toggleClass('selected');
  var values = $('.clicks li.selected').map(function(){
  
  return $(this).text();
  }).get()
$("#field-one").val(values.join(","))
});

＆＃13;

.clicks {
  padding: 0;
}

.clicks li {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

.selected {
  background: #AAAAAA;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="field-one" type="text" />
<ul class="clicks">
  <li>15</li>
  <li>20</li>
  <li>30</li>
</ul>

＆＃13;

使用.map()将li值添加到所选类
使用.join()加入,

Answer 2

更好的方法是选择所有选定类的元素，并在每次单击时将其值连接到输入。我很长时间没有使用jQuery，所以也许我打破了每种语法，但想法就在那里;）

$('.clicks li').bind('click', function(){
  $(this).toggleClass('selected');

  var inputText = "";
  $(this).parent.find('.selected').each(function(li) {
    inputText += (inputText == "" ? "" : ", ")+li.html();
  }
  $('input#field-one').val(inputText);
});

Answer 3

使用Array.indexOf()和Array.splice()

$('.clicks li').bind('click', function(){
    $(this).toggleClass('selected');
    var numbers = $(this).html();
    var joinNumbers = $('input#field-one').val().replace(/^,|,$/g, '').split(',');
    var index = joinNumbers.indexOf(numbers);
    if (index > -1) joinNumbers.splice(index, 1);
    else joinNumbers.push(numbers);

    $('input#field-one').val(joinNumbers.join());
});

使用jsfiddle在取消选择时从输入中删除值

3 个答案: