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')
});

我如何“升级”它以获取例如像value这样的属性并使用它来选择要追加的div，因为我更喜欢将它作为1个函数而不是2？

此代码也会附加一个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（＆＃39; #content＆＃39;）;~~

//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) {

~~$（data）.filter（element）.appendTo（＆＃39; #content＆＃39;）;~~

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

<强>更新

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

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

从另一个html文件追加div

1 个答案: