动态地添加(显示/隐藏文本),并单击时显示/隐藏下面的字段集
问题描述:
我想附加(显示/隐藏文本)动态到一个跨度,当点击该特定文本时,我想要显示/隐藏效果在下面的字段集。 我完成了显示/隐藏附加到span的文本任务。但是当我点击该文本时出现问题。除了跨度旁边的文本被改变之外没有任何反应。动态地添加(显示/隐藏文本),并单击时显示/隐藏下面的字段集
HTML:
<span>Store Dropdown</span>
<fieldset id="fieldset-store" class="showHide">
<legend>Choose by item:</legend>
<label for="prodtype">Type:</label>
<select name="prodtype" id="prodtype">
<option value="0" selected="selected">Choose type</option>
<option value="1"> Sample1</option>
<option value="2"> Sample2</option>
<option value="3"> Sample3</option>
<option value="4"> Sample4</option>
</select>
<label for="brandtype">of:</label>
<select name="brandtype" id="brandtype">
<option value="0" selected="selected">Choose brand</option>
<option value="1"> Brand1</option>
<option value="2"> Brand2</option>
<option value="3"> Brand3</option>
<option value="4"> Brand4</option>
</select>
<label for="prodprice">Price:</label> <input id="prodprice" name="prodprice" value="" type="text">
</fieldset>
JS代码:
$(document).ready(function(){
$(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
$(".showHide").hide();
$('a.showHideLink').click(function() {
if ($(this).html()=='Show')
$(this).html('Hide');
else
$(this).html('Show');
$(this).next().toggle('slow');
return false;
});
});
PLS建议我什么样的变化,我需要做。在此先感谢
答
$(document).ready(function(){
$(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
$(".showHide").hide();
$('a.showHideLink').click(function() {
if ($(this).html()=='Show')
$(this).html('Hide');
else
$(this).html('Show');
$(".showHide").toggle('slow');
return false;
});
});
或
$(document).ready(function(){
$(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
$(".showHide").hide();
$('a.showHideLink').click(function() {
if ($(this).html()=='Show')
$(this).html('Hide');
else
$(this).html('Show');
$(this).parent().next().toggle('slow');
return false;
});
});
它的工作,但我想知道为什么它不工作时,我试图用“的.next()” – kayteen 2009-08-20 05:54:44
你附加内的锚标记跨度,这没有下一个元素。 – rahul 2009-08-20 06:00:04
如果您已指定'$(this).parent()。next()。toggle('slow');'那么它会起作用。 – rahul 2009-08-20 06:00:45