jquery - 预先复制

Question

我的代码找到我检查的 Radio，然后找到下一个元素并将该内容添加到我想要的 div 中。但是，当我检查不同的 Radio 然后返回到前一个 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()它将替换目标元素的原始数据。

例如 $('#' + 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);