前置重复

Question

我的代码找到了我检查过的广播，然后找到了下一个元素，并在我想要的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);
   })
});

Answer 1

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

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

动画示例

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

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

Answer 2

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

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