前置重复

时间:2013-03-11 21:31:59

标签: jquery prepend

我的代码找到了我检查过的广播,然后找到了下一个元素,并在我想要的div中添加了该内容。然而,当我检查一个不同的无线电,然后回到前一个div它保留前置内容,它再次预先。所以我最终在div上重复了一遍。

HTML:

<form>
    <input type="radio" name="form" value="informed"/>
    <span>INFORMED CONSENT</span><br />
    <input type="radio" name="form" value="release"/>
    <span>RELEASE OF INFORMATION</span><br />
    <input type="radio" name="form" value="intake"/>
    <span>INTAKE FORM</span><br />
    <input type="radio" name="form" value="checklist"/>
    <span>CHECKLIST OF CONCERNS (CHILD & ADOLESCENT AND ADULT)</span><br />
    <input type="radio" name="form" value="health"/>
    <span>HEALTH INFORMATION PRIVACY FORM</span><br />
</form>

<div id="informed" class="Form">1</div>
<div id="release" class="Form">2</div>
<div id="intake" class="Form">3</div>
<div id="checklist" class="Form">4</div>
<div id="health" class="Form">5</div>
<div id="ContactFormSix" class="Form">6</div>

JS

var myForm = new Array("INFORMED CONSENT","RELEASE OF INFORMATION","INTAKE FORM");
$(document).ready(function () {
   $('input').on( 'change', function () {
      //check
      var ValUe = $(this).val();
      $('.Form').hide();
      $('#' + ValUe).show();
      //Find the value of the input that was clicked
      var formVaule = $('input[value="' + ValUe + '"]');
      //Grab the value of the input that was clicked and find the next element and retreive the text
      var k = formVaule.next().text();
      //PrePend the elemnts text   
      $('#' + ValUe).prepend(k);
   })
});

2 个答案:

答案 0 :(得分:0)

不使用.prepend().append()尝试使用.html(),而是替换目标元素原始数据。

E.g。 $('#' + ValUe).html(k);

动画示例

只是一个例子,可以通过许多其他方式实现。

$('#' + ValUe).html(<span style="opacity:0;">k</span>);
$('#' + ValUe span).animate({opacity:1},slow);

答案 1 :(得分:0)

在预先添加数据之前,您可以清理div,然后预先预付:

$('#' + ValUe).empty(k);
$('#' + ValUe).prepend(k);