Question

如果要选择append，我想span input到列表中，然后replace和下一个选择的输入一起remove，如果没有，则完全id。

我试图分配一个唯一的var sort_key = "sort-" + span;标记，以告诉该选择属于哪个输入组，以便它仅替换/删除该组中的标记：

  if ($(this).is(":checked")) {
  $keys.append("<span id='" + sort_key + "'>" + span + "</span>"); // Append the div from out of the loop
} else {
  if ($keys.has("#" + sort_key)) {
    $("#" + sort_key).remove();
  }
}

然后使用附加和删除来定位该组中的标签：

span

正在添加remove();标签，但是我的删除功能不是将标签替换为下一个选定的值，而是再次附加。如何修复span函数，以便在给定输入选择的情况下附加replaced标记，然后在下一个选定的输入之后附加append（如果未选中，则将其删除）。

是否有一种方法可以创建一个函数来处理标签的remove / on.change，而不是针对每个on.click或$(document).ready(function() { var allRadios = $("#radios input[type='radio']"); $(allRadios).change(function() { var span = $(this) .closest("label") .find("input") .attr("value") .trim(); var sort_key = "sort-" + span; var $keys = $('input[type="radio"]:checked') .closest(".all") .find(".selections"); if ($(this).is(":checked")) { $keys.append("<span id='" + sort_key + "'>" + span + "</span>"); // Append the div from out of the loop } else { if ($keys.has("#" + sort_key)) { $("#" + sort_key).remove(); } } console.log(span); }); var allCheckboxes = $("#checkboxes input[type='checkbox']"); $(allCheckboxes).change(function() { var span = $(this) .closest("label") .find("input") .attr("value") .trim(); var sort_key = "sort-" + span; var $keys = $('input[type="checkbox"]:checked') .closest(".all") .find(".selections"); if ($(this).is(":checked")) { $keys.append("<span id='" + sort_key + "'>" + span + "</span>"); // Append the div from out of the loop } else { if ($keys.has("#" + sort_key)) { $("#" + sort_key).remove(); } } console.log(span); }); $(".button").click(function() { var span = $(this) .text() .trim(); var $keys = $(this) .closest(".all") .find(".selections"); $keys.find("span").remove("#" + span); $keys.append("<span id='" + span + "'>" + span + "</span>"); console.log(span); }); });进行迭代？

.selections {
  display: flex;
  algin-items: center;
  height: 40px;
}

.selections span {
  padding: 9px;
  min-height: 20px;
  border-radius: 6px;
  background: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <div class="selections">Selections Here:</div>
  <div id="radios">
    <label>
      <input type="radio" name="sort" id="up" value="Up">
         <span>Up</span>
    </label>
    <label>
      <input type="radio" name="sort" id="down" value="Down">
         <span>Down</span>
    </label>
    <label>
      <input type="radio" name="sort" id="sideways" value="Sideways">
      <span>Sideways</span>
    </label>
  </div>
  <div id="checkboxes">
    <label>
      <input type="checkbox" name="check" id="food" value="Food">
         <span>Food</span>
    </label>
    <label>
      <input type="checkbox" name="check" id="drink" value="Drink">
         <span>Drink</span>
    </label>
    <label>
      <input type="checkbox" name="check" id="snack" value="Snack">
      <span>Snack</span>
    </label>
  </div>
  <div id="buttons">
    <button class="button cat-button" data-filter="animals">Animals</button>
    <button class="button cat-button" data-filter="shapes">Shapes</button>
    <button class="button cat-button" data-filter="colors">Colors</button>
  </div>
</div>

gradle.properties

Answer 1

不能100％地确定OP的目标是什么，所以这是我了解的目标概述：

三组输入各不相同的[type]
- 每个组都放在自己的<fieldset>中。
- 每个输入都分配有一个类别，该类别指示其所属的组。
  - .rad（用于单选按钮）
  - .chk（用于复选框）
  - .btn（用于按钮）
- <button>标签现在为<input type='button'>，以便于进行有凝聚力的收集过程。
选择输入后，标签上方会显示输入值，其他标签也将被删除。 在哪里还不清楚...到底要删除什么？
- 是否仅删除了该特定组中的标签？
- 是否已删除所有标签，而与组无关？
- 是否仅在当前被修改的组的标签处于非活动状态时才将其删除？
- 所以我决定实施＃3，因为它是最有用的。
- 添加了一个<section>，并在其中嵌套了三个<article>s。每篇文章都分配有一个类别，该类别对应于一个组：.rads，.chks，.btns。

详细信息在演示中进行了评论。

$(function() {

  // If any <input> is clicked...
  $('input').on('click', function(e) {

    // Store a htmlString of output.tag in a variable
    var tag = `<output class='tag'></output>`;

    /*
    if input.rad...
    Clear article.rads
    Append a .tag with its value to.rads
    */
    if ($(this).is('.rad')) {
      $('.rads').empty();
      $(tag).appendTo('.rads').val($(this).val());

      /*
      or if its input.chk...
      Clear article.chks
      On each .chk that is checked appand a tag with its
      value to .chks
      */
    } else if ($(this).is('.chk')) {
      $('.chks').empty();
      $('.chk:checked').each(function() {
        $(tag).appendTo('.chks').val($(this).val())
      });

      /*
      but if its input.btn...
      Remove .active class if it has it otherwise add it
      Clear article.btns
      On each button.active append a tag with its value to
      .btns 
      */
    } else if ($(this).is('.btn')) {
      //$(this).toggleClass('active');
      $('.btns').empty();
      // $('.btn.active').each(function() {

      $(tag).appendTo('.btns').val($(this).val())
      //});

      // Otherwise terminate function
    } else {
      return false;
    }
  });

});

.sel {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 40px;
  background: rgba(100, 100, 100, 1);
}

.sel .tag {
  display: inline-block;
  padding: 9px;
  min-height: 20px;
  width: fit-content;
  border: 1px solid white;
  border-radius: 6px;
  color: white;
}

.rads .tag {
  background: red;
}

.chks .tag {
  background: green;
}

.btns .tag {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id='all'>

  <section class='sel'>
    <article class='rads'></article>
    <article class='chks'></article>
    <article class='btns'></article>
  </section>
  <fieldset class='radio'>
    <legend>Radio Buttons</legend>
    <input id="r1" class='rad' name="rad" type="radio" value="1">
    <label for='r1'>1</label>

    <input id="r2" class='rad' name="rad" type="radio" value="2">
    <label for='r2'>2</label>

    <input id="r3" class='rad' name="rad" type="radio" value="3">
    <label for='r3'>3</label>
  </fieldset>

  <fieldset class='check'>
    <legend>Checkboxes</legend>
    <input id='c4' class='chk' name="chk" type="checkbox" value=" 4 ">
    <label for='c4'>4</label>

    <input id='c5' class='chk' name="chk" type="checkbox" value=" 5 ">
    <label for='c5'>5</label>

    <input id='c6' class='chk' name="chk" type="checkbox" value=" 6 ">
    <label for='c6'>6</label>
  </fieldset>

  <fieldset class='button'>
    <legend>Buttons</legend>
    <input id='b7' class='btn' name="btn" type='button' value=" 7 ">

    <input id='b8' class='btn' name="btn" type='button' value=" 8 ">

    <input id='b9' class='btn' name="btn" type='button' value=" 9 ">
  </fieldset>

</form>

jQuery-附加/删除输入或按钮值，如果选中/单击则列出

1 个答案: