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

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

間違いなく道に迷っている場所の 1 つは、インラインonclickハンドラーと目立たない jquery クリック ハンドラーを混在させようとすることです。特に、両方が同じ要素のクリック ハンドラーである場合。始めたばかりで、jQuery を使用する場合、最善の方法は、インライン JavaScript をまったく使用しないことです。

関数を読み取るadd()には、追加ボタンをクリックする必要があります。これにより、jQuery clcik ハンドラーが作成されます...しかし、クリックは既に発生しているため、そのハンドラーは初めて起動しません。

インラインを取り除き、関数と関数をonclickアンラップすると、すべての JavaScript がマークアップから取り除かれ、追跡が容易になります。add()remove()

デモ: http://jsfiddle.net/Xfg7P/

注: fieldset は form タグ内にある必要があります。マークアップには form タグはありません。

于 2012-10-14T21:25:11.723 に答える
0

要素を複製して新しい dynamic を追加する関数を単純化しました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 に答える