克隆输入元素,紧跟在他等于右 DIV 内部之后
Clone INPUT element just after his equal an inside the right DIV
我有这个 HTML:
{% for entity in items %}
<input type="checkbox" name="{{ entity.getLabel|lower }}" id="{{ entity.getLabel|lower ~ "_choice" }}" value="{{ entity.getId }}" /> {{ entity.getLabel }}
{% endfor %}
{% for entity in items %}
<div id="{{ entity.getLabel|lower ~ "_choice_" ~ entity.getId }}" style="display: none">
<button type="button" class="{{ entity.getLabel|lower }}">Adicionar {{ entity.getLabel|lower }}</button>
</div>
{% endfor %}
<button type="button" class="create-variation" id="create-variation" style="display: none">{{'Crear variaciones'|trans}}</button>
<section id="variations_holder" style="display: none"></section>
这是它渲染时的样子:
<div style="" id="talla_choice_24">
<span>Talla<input placeholder="Talla" value="" data-id="talla_24" name="input_talla[]"></span>
<br>
<button class="talla" type="button">Adicionar talla</button>
</div>
<div style="" id="color_choice_25">
<span>Color<input placeholder="Color" value="" data-id="color_25" name="input_color[]"></span>
<br>
<button class="color" type="button">Adicionar color</button>
</div>
我第一次创建如下输入:
$('#choices').on("change", ":checkbox", function(e) {
var theName = $(this).attr('name');
var theID = $(this).attr('value');
var hasChecked = $(this).is('checked').length;
var input = "";
input = '<span>' + capitalize(theName) + '<input name="input_' + theName + '[]" data-id="' + theName + '_' + theID + '" value="" placeholder="' + capitalize(theName) + '" /></span><br/>';
if ($(this).is(":checked")) {
$("#" + theName + '_choice_' + theID).find(':button').before(input);
$("#" + theName + '_choice_' + theID).show();
} else {
$("#" + theName + '_choice_' + theID).find(':not(button)').remove();
$("#" + theName + '_choice_' + theID).hide();
}
});
这段代码工作正常,我现在需要的是根据我单击的按钮克隆每个输入元素。例如,少说我点击按钮"按钮#talla",然后我应该克隆元素:
<span>Talla<input placeholder="Talla" value="" data-id="talla_24" name="input_talla[]"></span><br>
另一方面,如果我单击"按钮#颜色",那么我应该克隆的是:
<span>Color<input placeholder="Color" value="" data-id="color_25" name="input_color[]"></span><br>
当然,代码应该使用第一个模板方法,而不是生成的代码,因为它是动态的。我正在研究这个:
$("#choices").on("click", ":button", function(e) {
var class_name = $(this).attr('class');
var theID = $(this).attr('value');
$("#" + class_name + "_choice span:last").clone().attr("id", theID).before("button." + class_name);
});
但是不起作用,因为它不克隆并做任何事情,任何人都可以帮我吗?
PS:有一些Twig标签和值,但忘记它们,因为它们正确设置了值
我需要得到的是父 DIV 的类,以便克隆它的最新输入
不,实际上你甚至不需要这个。您只需要访问父div,无论其类如何 - 在单击的按钮上使用 parent
遍历方法:
$("#choices").on("click", ":button", function(e) {
$(this).parent().find("span:last").clone().insertBefore(this);
});
顺便说一句,按钮没有值,跨度或输入没有 id,所以我不确定你试图用theID
做什么.
相关文章:
- 如何相对于浏览器窗口定位DIV
- Jquery Div 幻灯片从右到左切换无法正常工作
- 如何使鼠标事件仅适用于外部DIV
- Div向右对齐,并根据右侧的其他Div更改x位置
- 在火狐插件中处理右键单击,仅适用于文档
- JavaScript 零位左移和右移等效于 Python 中的
- 隐藏 DIV,如果窗口窄于 DIV,则替换为 DIV
- jQuery:当 DIV 的子元素靠近其父元素的右边缘时,将 DIV 向左移动(自动滚动类型)
- Javascript 专注于 DIV 元素在 chrome 上不起作用
- 从右向左切换 Div
- 克隆输入元素,紧跟在他等于右 DIV 内部之后
- 使用按钮和jQuery从左或右滑动DIV
- 使用特定于浏览器的右键单击上下文菜单覆盖特定于站点的JavaScript右键单击上下文菜单
- DIV AREA类似于下拉菜单(display:none to display:block)
- 点击关闭Div不适用于Chrome,但适用于所有其他浏览器
- 防止以前在mousedown上定义的事件只用于右键单击
- CSS或JS规则适用于所有Div更改Div内部Div的BG颜色,而不更改父Div
- 固定应用于内部Div禁用溢出:隐藏
- 将实际操作应用于右键单击上下文菜单
- 锚html ()只适用于右击,而不是左击