从另一个HTML文件追加DIV

Question

嗨，大家好，我有哪些应该从外部HTML 追加的div 2个菜单按钮现在我对外部HTML这个

 <ul> 
      <li><a href="#" onclick="javascript:test2();" value="#CS" >CS</a></li> 
      <li><a href="#" onclick="javascript:test2();" value="#PS" >PS</a></li> 
     </ul> 

和2的div，只是有简单的文字他们说：“text1”中，而“text2”

，我使用此代码追加数据

$.get('external/list.html', function (data) { 
     $(data).filter('#PS').appendTo('#content') 
}); 

我如何“升级”其采取例如像值的属性并使用它来选择要附加的div，因为我更喜欢将它作为1函数而不是制作2

此代码还会显示一个div，但它不会重置它只是一直在反复发送同一个div我阻止它？

Answer 1

选项1

保持一个调用你的$.get，因为你现在正在做的，但通过参考你的点击element通过您function如下：

<ul> 
    <li><a href="#" onclick="javascript:test2(this);" value="#CS" >CS</a></li> 
    <li><a href="#" onclick="javascript:test2(this);" value="#PS" >PS</a></li> 
</ul> 

JS

function test2(ctrl) 
{ 
    var element=$(ctrl).attr('value'); 
    $.get('external/list.html', function (data) { 

$（data）.filter（element）.appendTo（'＃content'）;

  //element will have value either #PS or #CS 
    }); 
} 

注 - .appendTo将保持对数据附加到你的DOM，而是使用.html它取代的内容，每次

例：

$(data).filter(element).html('#content'); 

---

选项2

您还可以附加click事件您a标签与两因而，如下消除直列function调用中给出一个通用类：

<ul> 
    <li><a href="#" value="#CS" class="menu">CS</a></li> 
    <li><a href="#" value="#PS" class="menu">PS</a></li> 
</ul> 

JS

$(".menu").on('click',function(){ var element=$(this).attr('value'); //this refers to clicked element $.get('external/list.html', function (data) { 

$（da TA）.filter（元素）。appendTo（ '＃内容'）;

  //element will have value either #PS or #CS 
    }); 
}); 

---

更新

理想html应该工作，但我强加给在错误的方式。你只需要改变一件事如下：

$("#content").html($(data).filter(element));