-2

我是这个领域的初学者。我创建了一个 HTML 页面，单击一些“+”/“-”按钮，我分别从 Multiple.js 文件中调用 add() 和 remove() 以从 HTML 页面中添加或删除代码块。但我得到了意想不到的结果。文件如下：Multiple Group Selection.html

<!DOCTYPE HTML >
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="style.css">
<TITLE>Multiple Group Selections</TITLE>
<script src="Multiple.js" type="text/javascript"></script>
</HEAD>
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">Multiple Group Selections</H2>
<div id="clonedInput1" class="clonedInput">
<FIELDSET class="field">
<LEGEND ALIGN="RIGHT">
<button type="button" class = "clone" onclick={add();}  >+</button>
<button type="button" class = "remove" onclick={remove();}>-</button>
</LEGEND>
Field 2A: <INPUT TYPE="TEXT" NAME="field2A" VALUE="Field A"><BR>
Field 2B: <INPUT TYPE="TEXT" NAME="field2B" VALUE="Field B"><BR>
Field 2C: <INPUT TYPE="TEXT" NAME="field2C" VALUE="Field C"><BR>
</FIELDSET>
</div>
</BODY>
</HTML>

多个.js：

function add(){
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedInput").length;

$("button.clone").live("click", function(){
$(this).parents(".clonedInput").clone()
    .appendTo("body")
    .attr("id", "clonedInput" +  cloneIndex)
    .find("*").each(function() {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
        }
});
cloneIndex++;
});

}
function remove(){
 $("button.remove").live("click", function(){
 $(this).parents(".clonedInput").remove();
});
}

样式.css

 .clone {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 12px;  
 font-weight: bold; 
 color: #00ffff;
 Background-COLOR: white;
 border: black;
 border-style: solid;
 border-width: 1px;
 }
.remove{
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #00ffff;
Background-COLOR: white;
border: black;
border-style: solid;
border-width: 1px;
}

我想要的只是单击“+”按钮，必须将其附加到 . 单击“-”按钮时，它也应该被删除。请帮帮我。我累死。

4

2 回答 2

3

您肯定会误入歧途的一个地方是尝试将内联onclick处理程序与不引人注目的 jquery 点击处理程序混合使用。特别是当它们都是相同元素的单击处理程序时。如果您刚刚开始，并且打算使用 jQuery，那么最好的方法是根本不使用任何内联 javascript。

阅读您的add()函数，您必须单击添加按钮，然后创建一个 jQuery clcik 处理程序......但点击已经发生，因此该处理程序不会第一次触发。

剥离内联onclick并展开add()andremove()函数将所有 javascript 从标记中取出，使其更易于理解。

演示：http: //jsfiddle.net/Xfg7P/

注意： fieldset 应该在 form tag 里面，markup 中没有 form tag。

于 2012-10-14T21:25:11.723 回答
0

我简化了克隆元素并添加新动态的功能id。

$('#btnclone').on('click', function() {
    var lastid = $('[id^="clonedInput"]').length + 1;
    $(".clonedInput")
        .last()
        .clone()
        .attr('id', 'clonedInput' + lastid)
        .appendTo("body")
    $('input').each(function() {
        $(this).val('PARENT DIV ID =  ' + $(this).parent().attr('id'))
    })
})

在这里测试它：http: //jsfiddle.net/RASG/MjMh5/

于 2012-10-14T21:57:25.717 回答