为什么我的图标没有出现?

时间:2017-07-08 08:45:36

标签: javascript jquery html contextmenu

这是完整项目QuickLinks.v4

的拉链

我一直在合作一个项目而且我们遇到了一个问题,我们希望所有图标都有一个右键菜单,其中有几个选项,每个图标都是唯一的。我们差不多完成了,但现在图标没有被绘制到屏幕上。我们当时只处理前5个。这是我第一次使用jQuery,我将不胜感激。

我现在将发布我认为相关的项目部分。

icon.html

<a target="_blank">
    <img class="icons" />
    <div class="data">
           <div>
                 <input type="hidden" class="login" />
                 <input type="hidden" class="username" />
                 <input type="hidden" class="password" />
           </div>
    </div>
</a>

icon.js

function buildIcons() {
    var icons = [
        ["https://discordapp.com/", "discord-icon", "icons/discord.png", "social", "Discord", 
            [
                 ["Main Account", "lela_null", "somepass"], 
                 ["Bot Account", "Uta Yuki", "somepass"]
            ]
        ],
        ["https://www.youtube.com/", "youtube-icon", "icons/youtube.png", "social", "YouTube", 
            [
                 ["Main Account", "lela@email", "somepass"], 
            ]
        ],
        ["https://www.facebook.com/?sk=h_chr", "facebook-icon", "icons/facebook.png", "social", "Facebook", 
            [
                 ["Main Account", "lela@email", "somepass"], 
            ]
        ],
        ["https://www.twitter.com/", "twitter-icon", "icons/twitter.png", "social", "Twitter", 
            [
                 ["Main Account", "lela@email", "somepass"], 
            ]
        ],
        ["https://mg.mail.yahoo.com/neo/launch?.rand=8647i3s40jpvp", "ymail-icon", "icons/ymail.png", "social", "Yahoo Mail", 
            [
                 ["Main Account", "lela@email", "somepass"], 
            ]
        ]
    ];



    $.get('data/icon.html', function(data) {
        var icon;
        icons.forEach(function(iconData, index, array) {
            console.log(index);
            icon = $(data).insertAfter("#" + iconData[3]);
            $(icon).find("img").attr("src", iconData[2]);
        });
    });
}; 

的script.js

/* get icon id */
function buildMenu(iconId) {
    $("#remove").click(function() {
       $("#" + iconId).hide();
       cancel();
    });
    $("#menu-title").text($("#"+iconId).data("name"));
    $("#site-link").attr("href", $("#" + iconId).parent().attr("href")).click(cancel);
    switch(iconId) {
    };
}

/* set right click for icons */
$(document).ready(function() {
    buildIcons();
    $(".icons").on("contextmenu", function(e) {
        buildMenu(this.id);
        $("#contextmenu").show().css({
            top: e.clientY,
            left: e.clientX
        });
        e.preventDefault();
    });
});

function cancel() {
    $("#contextmenu").hide();
}

有更多文件和代码,如果您需要,可以在上面下载。

此外,控制台在我的jQuery.js文件中显示TypeError: a is null

2 个答案:

答案 0 :(得分:1)

检查

$.get('data/icon.html', function(data) {
    icons.forEach(function(iconData, index, array) {
        console.log(index);

        // Get 'data' as jQuery object
        var $data = $(data);

        // Find image tag and set source
        $data.find('img').attr('src', iconData[2]);

        //Finally put it on page
        $data.insertAfter("#" + iconData[3]);
    });
});

答案 1 :(得分:0)

jQuery无法从其他文件中包含html。