用jquery更新fb样框

Question

我想从表单输入更新facebook喜欢的框。在单击检查按钮之后。新的相似框将出现在div中。

<input type="text" class="form-control" placeholder="facebook Page URL" 
id="fbURL" value="cnn">             

<button class="btn btn-primary" type="button" id="fbChk">check</button>

Javascript

$('#fbPage').append('<div id="fb-like" class="fb-like-box" 
data-href="http://www.facebook.com/RTnews" 
data-width="500" data-show-faces="true" 
data-stream="false" data-header="true"></div>');

    $("#fbChk").click(function() {
        var fbURL = $("#fbURL").val(); 
        $('#fbPage').html('<div id="fb-like" class="fb-like-box" 
         data-href="http://www.facebook.com/'+fbURL+'" 
         data-width="500" data-show-faces="true" 
         data-stream="false" data-header="true"></div>');
      });

当我运行这个脚本时。旧的facebox消失了，没有一个新的展示。

Answer 1

这可以很容易地通过一个类似react之类的前端框架来完成，但是在jQuery中我看到了两个选择，当您单击按钮$.hide()第一个div和$.append()第二个div时，或者您可以拆开第二个div并给出道具display: none。单击该按钮时，可以使用$.show()显示第二个div，并隐藏第一个one..or，尝试使用innerHTML()而不是$.html()。