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

时间:2019-05-23 16:44:55

标签: jquery

如果要选择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

1 个答案:

答案 0 :(得分:1)

不能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>