时间戳

首页 > 解决方案 > 如何使用jquery修复div中的多个附加

javascript - 如何使用jquery修复div中的多个附加

问题描述

我在将示例 a href 附加到 div 或 html 元素时遇到问题，我的 ajax 只有 3 个数组响应，但是结果显示对应 div 的重复项。我将与你们分享我已经制作的示例代码，

样本输出

我在这里有我的后端 php：

    <?php 
    require_once('../ConnectionString/require_db.php');
    session_start();
    //submit function
    $status = 'Active';
    $posttype_affiliation_page = 'affiliation_page';
    $posttype_member_org_page = 'member_org_page';
    $affiliation_member_org_content = $db->prepare('SELECT title,link,posttype FROM tblcontent 
    WHERE status = ? AND posttype = ? OR posttype = ? ORDER BY contentID DESC') 
    or die($db->error);

    $affiliation_member_org_content->bind_param('sss',$status,$posttype_affiliation_page,$posttype_member_org_page);
    $affiliation_member_org_content->execute();
    $affiliation_member_org_content->bind_result($title,$link,$posttype);
    $result = array();

    while ($affiliation_member_org_content->fetch()) {
        $result[] = array('title'=>$title,'link'=>$link,'posttype'=>$posttype);
       header('Content-type: application/json');

   }

    echo json_encode($result);

?>

我的前端：

    $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

我的HTML：

<div class="Affiliation">
                    <h5>Affiliation</h5>

                    <p style="font-size:14px;" class="list_affiliation_links">

                    </p>
                </div>
                <br>
                <div class="Member">
                    <h5>Member Organizations</h5>
                    <p style="font-size:14px;" class="list_member_org_links">

                    </p>
                </div>

标签： javascriptjqueryhtml

解决方案

 $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_affiliation_links').html('');
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_member_org_links').html('');
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

您应该首先清除 html 内容，然后设置为 DOM 元素。可能对你有用。

推荐阅读