javascript - 从另一个 html 文件追加 div

Question

我有 2 个菜单按钮，它们应该从外部 html 附加 div。现在我有这个:

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

外部 html 上有 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
    });
}

Note - .appendTo will keep on appending the data to your DOM, instead use .html which replaces contents everytime

例如:

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

---

选项 2

您还可以附上 click事件到您的a具有为两者指定的公共(public)类的标签，从而删除内联 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) {

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

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

---

更新

理想情况下 html应该可以，但我以错误的方式强加了它。你只需要改变一件事如下:

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