如果要选择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
答案 0 :(得分:1)
不能100%地确定OP的目标是什么,所以这是我了解的目标概述:
三组输入各不相同的[type]
<fieldset>
中。 每个输入都分配有一个类别,该类别指示其所属的组。
.rad
(用于单选按钮).chk
(用于复选框).btn
(用于按钮)<button>
标签现在为<input type='button'>
,以便于进行有凝聚力的收集过程。选择输入后,标签上方会显示输入值,其他标签也将被删除。 在哪里还不清楚...到底要删除什么?
<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>