我对以下问题感到抓狂:
我有这段代码可以在一个花哨的滑动表单上复制一些字段:
(function($){
$countCursos = 1;
$countFormsA = 1;
$countFormsB = 1;
$.fn.addForms = function(idform){
var adicionar_curso = "<p>"+
" <label for='nome_curso'>Nome do Curso</label>"+
" <input id='nome_curso' name='nome_curso["+$countCursos+"]' type='text' />"+
" </p>"+
" <p>"+
" <label for='instituicao'>Instituição</label>"+
" <input id='instituicao' name='instituicao["+$countCursos+"]' type='text' />"+
" </p>";
var myform2 = "<table>"+
" <tr>"+
" <td>Field C</td>"+
" <td><input type='text' name='fieldc["+$countFormsA+"]'></td>"+
" <td>Field D ("+$countFormsA+"):</td>"+
" <td><textarea name='fieldd["+$countFormsA+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
var myform3 = "<table>"+
" <tr>"+
" <td>Field C</td>"+
" <td><input type='text' name='fieldc["+$countFormsB+"]'></td>"+
" <td>Field D ("+$countFormsB+"):</td>"+
" <td><textarea name='fieldd["+$countFormsB+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
if(idform=='novo_curso'){
alert(idform);
adicionar_curso = $("<div>"+adicionar_curso+"</div>");
$("button", $(adicionar_curso)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(adicionar_curso);
$countCursos++;
}
if(idform=='mybutton1'){
alert(idform);
myform2 = $("<div>"+myform2+"</div>");
$("button", $(myform2)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform2);
$countFormsA++;
}
if(idform=='mybutton2'){
alert(idform);
myform3 = $("<div>"+myform3+"</div>");
$("button", $(myform3)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform3);
$countFormsB++;
}
};
})(jQuery);
$(function(){
$("#mybutton1").bind("click", function(e){
e.preventDefault();
var idform=this.id;
if($countFormsA<3){
$("#container1").addForms(idform);
}
});
});
$(function(){
$("#novo_curso").bind("click", function(e){
e.preventDefault();
var idform=this.id;
alert(idform);
if($countCursos<3){
$("#outro_curso").addForms(idform);
}
});
});
$(function(){
$("#mybutton2").bind("click", function(e){
e.preventDefault();
var idform=this.id;
if($countFormsB<3){
$("#container2").addForms(idform);
}
});
});
它使用正确的 html 代码:
<div id="content_form">
<div id="wrapper_form">
<div id="navigation_form" style="display:none;">
<ul>
<li class="selected">
<a href="#">Dados Pessoais</a>
</li>
<li>
<a href="#">P. Académico</a>
</li>
<li>
<a href="#">P. Profissional</a>
</li>
<li>
<a href="#">Eventos</a>
</li>
<li>
<a href="#">Curriculum Vitae</a>
</li>
<li>
<a href="#">Confirmar</a>
</li>
</ul>
</div>
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Dados Pessoais</legend>
<p>
<label for="nome">Nome</label>
<input id="nome" name="nome" />
</p>
<p>
<label for="morada">Morada</label>
<input id="morada" name="morada" />
</p>
<p>
<label for="localidade">Localidade</label>
<input id="localidade" name="localidade" />
</p>
<p>
<label for="codigo_postal">Código Postal</label>
<input id="codigo_postal" name="codigo_postal" placeholder="ex: 1111-111" />
</p>
<p>
<label for="num_bi">Nº BI/Cartão do Cidadão</label>
<input id="num_bi" name="num_bi" />
</p>
<p>
<label for="data_nascimento">Data de Nascimento</label>
<input id="data_nascimento" name="data_nascimento" placeholder="dia-mês-ano ex: 1-1-1975" />
</p>
<p>
<label for="telemovel">Telemóvel</label>
<input id="telemovel" name="telemovel" placeholder="ex: 911234567" />
</p>
<p>
<label for="tele_alternativo">Telefone Alternativo</label>
<input id="tele_alternativo" name="tele_alternativo" />
</p>
<p>
<label for="email">E-mail</label>
<input id="email" name="email" placeholder="ex: email@gmail.com"/>
</p>
<p>
<label for="email_alt">E-mail Alternativo</label>
<input id="email_alt" name="email_alt" />
</p>
<p>
<label for="info_adicional">Informação Adicional</label>
<textarea id="info_adicional" name="info_adicional" /></textarea>
</p>
</fieldset>
<fieldset class="step">
<legend>Percurso Académico</legend>
<p>
<label for="nome_curso">Nome do Curso</label>
<input id="nome_curso" name="nome_curso" type="text" />
</p>
<p>
<label for="instituicao">Instituição</label>
<input id="instituicao" name="instituicao" type="text" />
</p>
<p>
<label for="media_final">Classificação Final</label>
<input id="media_final" name="media_final" />
</p>
<p>
<label for="inicio_curso">Data Início Curso</label>
<input id="inicio_curso" name="inicio_curso" placeholder="dia-mês-ano ex: 1-1-1975" />
</p>
<p>
<label for="fim_curso">Data Fim Curso</label>
<input id="fim_curso" name="fim_curso" placeholder="dia-mês-ano ex: 1-1-1975" />
</p>
<div id="outro_curso">
</div>
<p>
<button id="novo_curso">Adicionar Outro Curso</button>
</p>
</fieldset>
<fieldset class="step">
<legend>P. Profissional</legend>
<p>
<label for="cardtype">Card</label>
<select id="cardtype" name="cardtype">
<option>Visa</option>
<option>Mastercard</option>
<option>American Express</option>
</select>
</p>
<p>
<label for="cardnumber">Card number</label>
<input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="secure">Security code</label>
<input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="namecard">Name on Card</label>
<input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset class="step">
<legend>Eventos</legend>
<p>
<label for="newsletter">Newsletter</label>
<select id="newsletter" name="newsletter">
<option value="Daily" selected>Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Never">Never</option>
</select>
</p>
<p>
<label for="updates">Updates</label>
<select id="updates" name="updates">
<option value="1" selected>Package 1</option>
<option value="2">Package 2</option>
<option value="0">Don't send updates</option>
</select>
</p>
<p>
<label for="tagname">Newsletter Tag</label>
<input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset class="step">
<legend>Curriculum Vitae</legend>
<p>
<label for="newsletter">Newsletter</label>
<select id="newsletter" name="newsletter">
<option value="Daily" selected>Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Never">Never</option>
</select>
</p>
<p>
<label for="updates">Updates</label>
<select id="updates" name="updates">
<option value="1" selected>Package 1</option>
<option value="2">Package 2</option>
<option value="0">Don't send updates</option>
</select>
</p>
</fieldset>
<fieldset class="step">
<legend>Confirmar</legend>
<p>
Everything in the form was correctly filled
if all the steps have a green checkmark icon.
A red checkmark icon indicates that some field
is missing or filled out with invalid data. In this
last step the user can confirm the submission of
the form.
</p>
<p class="submit">
<button id="registerButton" type="submit">Register</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
让我抓狂的是,我的 wordpress 网站上的相同代码(jquery 和 html)不起作用。当我单击此按钮时:
<div id="outro_curso"></div>
<p><button id="novo_curso">Adicionar Outro Curso</button></p>
他进入 jquery 函数。我很高兴,因为我们打印了第一个 (alert(idform);),但第二个:
if(idform=='novo_curso'){
alert(idform);
adicionar_curso = $("<div>"+adicionar_curso+"</div>");
$("button", $(adicionar_curso)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(adicionar_curso);
$countCursos++;
}
当我运行我的 wordpress 网站时,它永远不会出现在屏幕上。会不会和某事发生冲突?
添加 jquery.noConclict 不起作用:
var $j = jQuery.noConflict();
(function($j){
var countCursos = 1,
var countFormsA = 1,
var countFormsB = 1;
$j.fn.addForms = function(idform){
var adicionar_curso = "<p>"+
" <label for='nome_curso'>Nome do Curso</label>"+
" <input id='nome_curso' name='nome_curso["+countCursos+"]' type='text' />"+
" </p>"+
" <p>"+
" <label for='instituicao'>Instituição</label>"+
" <input id='instituicao' name='instituicao["+countCursos+"]' type='text' />"+
" </p>";
var myform2 = "<table>"+
" <tr>"+
" <td>Field C</td>"+
" <td><input type='text' name='fieldc["+countFormsA+"]'></td>"+
" <td>Field D ("+countFormsA+"):</td>"+
" <td><textarea name='fieldd["+countFormsA+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
var myform3 = "<table>"+
" <tr>"+
" <td>Field C</td>"+
" <td><input type='text' name='fieldc["+countFormsB+"]'></td>"+
" <td>Field D ("+countFormsB+"):</td>"+
" <td><textarea name='fieldd["+countFormsB+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
if(idform=='novo_curso'){
alert(idform);
adicionar_curso = $j("<div>"+adicionar_curso+"</div>");
$j("button", $j(adicionar_curso)).click(function(){ $j(this).parent().parent().remove(); });
$j(this).append(adicionar_curso);
countCursos++;
}
if(idform=='mybutton1'){
alert(idform);
myform2 = $j("<div>"+myform2+"</div>");
$j("button", $j(myform2)).click(function(){ $j(this).parent().parent().remove(); });
$j(this).append(myform2);
countFormsA++;
}
if(idform=='mybutton2'){
alert(idform);
myform3 = $j("<div>"+myform3+"</div>");
$j("button", $j(myform3)).click(function(){ $j(this).parent().parent().remove(); });
$j(this).append(myform3);
countFormsB++;
}
};
})(jQuery);
$j(function(){
$j("#mybutton1").bind("click", function(e){
e.preventDefault();
var idform=this.id;
if(countFormsA<3){
$j("#container1").addForms(idform);
}
});
});
$j(function(){
$j("#novo_curso").bind("click", function(e){
e.preventDefault();
var idform=this.id;
alert(idform);
if(countCursos<3){
$j("#outro_curso").addForms(idform);
}
});
});
$j(function(){
$j("#mybutton2").bind("click", function(e){
e.preventDefault();
var idform=this.id;
if(countFormsB<3){
$j("#container2").addForms(idform);
}
});
});