时间戳

首页 > 解决方案 > jQuery - 如果选中/单击，则追加/删除输入或按钮值以列出

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

问题描述

如果它是 selected ，我想进入append列表，但是然后它与下一个选择的输入一起，如果没有，则完全它。spaninputreplaceremove

我试图分配一个唯一的id标签来告诉选择属于哪个输入组，以便它只替换/删除该组中的标签：

var sort_key = "sort-" + span;

然后使用 append 和 remove 来定位该组中的标签：

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

标签： jquery

解决方案

不是 100% 确定什么是 OP 目标，所以这里是我理解的大纲：

  1. 三组输入，每组不同[type]

    • 每个组都放置在自己的<fieldset>.

    • 每个输入都分配有一个类，该类指示它属于哪个组。

      • .rad对于单选按钮
      • .chk对于复选框
      • .btn用于按钮
    • 这些<button>标签现在<input type='button'>是为了促进一个有凝聚力的收集过程。

  2. 选择输入时，上方会出现一个带有输入值的标签，而其他标签将被删除。这是不清楚的地方......究竟删除了什么？

    • 是否仅删除了该特定组的标签？
    • 无论组是否都删除了所有标签？
    • 当前正在修改的组的标签是否仅在它们处于非活动状态时才被删除？
    • 所以我决定实施#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>

推荐阅读