JavaScript到jQuery语法在转换方面仍需要帮助 [英] JavaScript to jQuery syntax Still need help on Converting

问题描述

我无法确定运行时出了什么问题. 在这里，我试图将JavaScript重新编写为jQuery语法. 到底什么是不正确的?我做错了.

旧版>>

var cssmenuids = ["navmenu"];

    function createcssmenu()
    {
        for (var i = 0; i < cssmenuids.length; i++)
             var ultags = document.getElementById(cssmenuids[i]).getElementsByTagName("ul");
            for (var t = 0; t < ultags.length; t++)
            {
                ultags[t].style.top = ultags[t].parentNode.offsetHeight + "-1px";
                ultags[t].parentNode.onmouseover = function()
                {
                    this.style.zIndex = 100;
                    this.getElementsByTagName("ul")[0].style.visibility = "visible";
                    this.getElementsByTagName("ul")[0].style.zIndex = 0;
                }
                ultags[t].parentNode.onmouseout = function()
                {
                    this.style.zIndex = 0;
                    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
                    this.getElementsByTagName("ul")[0].style.zIndex = 100;
                }
            }
        }
    }

    if (window.addEventListener)
        window.addEventListener("load", createcssmenu, false);
    else if (window.attachEvent)
        window.attachEvent("onload", createcssmenu);

jQuery语法>>

    $(document).ready(function ()
    {
        $('ul#navmenu').height = $('ul#navmenu').parent.height + "-1px";

        $('ul#navmenu').parent.bind('mouseover', function ()
        {
            $(this).css('z-index', 100);
            $(this).$('ul')[0].css("visibility", "visible");
            $(this).$('ul')[0].css('z-index', 0);
        });
        $('ul#navmenu').parent.bind('mouseout', function ()
        {
            $(this).css('z-index', 0);
            $(this).$('ul')[0].css("visibility", "hidden");
            $(this).$('ul')[0].css('z-index', 100);
        });
    });

在JSfiddle上就是这样 http://jsfiddle.net/sublay/HCajr/

相关问题 JavaScript到jQuery语法构建自定义CSS水平菜单

解决方案

大多数通话中都缺少括号.

声明高度应该像这样

$('ul#navmenu').height($('ul#navmenu').parent().height() -1)

您需要使用.parent()而不是.parent

$('ul#navmenu').parent().bind('mouseover'

在下面，似乎您想先尝试在#navmenu中的第一个可用的ul.当您使用[0]时，您实际上是在调用.get()，它将jQuery对象转换为JavaScript DOM元素.这样做将消除您针对它运行jQuery函数的能力.同样，链接不会像选择器那样发生.此外，.css()会接受带有key:value对的对象.

$(this).find('ul:first').css({
    "visibility" : "visible",
    "z-index" : 0
});

再次，错过了.parent()

的()

$('ul#navmenu').parent().bind('mouseout',

再次，选择器链是错误的.

$(this).find('ul:first').css({
    "visibility" : "hidden",
    'z-index' : 100
});

I can not find out what is going wrong while running. Here I'm trying to re-write JavaScript to jQuery syntax. What exactly is incorrect? What I'm doing wrong.

Legacy >>

var cssmenuids = ["navmenu"];

    function createcssmenu()
    {
        for (var i = 0; i < cssmenuids.length; i++)
             var ultags = document.getElementById(cssmenuids[i]).getElementsByTagName("ul");
            for (var t = 0; t < ultags.length; t++)
            {
                ultags[t].style.top = ultags[t].parentNode.offsetHeight + "-1px";
                ultags[t].parentNode.onmouseover = function()
                {
                    this.style.zIndex = 100;
                    this.getElementsByTagName("ul")[0].style.visibility = "visible";
                    this.getElementsByTagName("ul")[0].style.zIndex = 0;
                }
                ultags[t].parentNode.onmouseout = function()
                {
                    this.style.zIndex = 0;
                    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
                    this.getElementsByTagName("ul")[0].style.zIndex = 100;
                }
            }
        }
    }

    if (window.addEventListener)
        window.addEventListener("load", createcssmenu, false);
    else if (window.attachEvent)
        window.attachEvent("onload", createcssmenu);

jQuery Syntax >>

    $(document).ready(function ()
    {
        $('ul#navmenu').height = $('ul#navmenu').parent.height + "-1px";

        $('ul#navmenu').parent.bind('mouseover', function ()
        {
            $(this).css('z-index', 100);
            $(this).$('ul')[0].css("visibility", "visible");
            $(this).$('ul')[0].css('z-index', 0);
        });
        $('ul#navmenu').parent.bind('mouseout', function ()
        {
            $(this).css('z-index', 0);
            $(this).$('ul')[0].css("visibility", "hidden");
            $(this).$('ul')[0].css('z-index', 100);
        });
    });

That's it on JSfiddle http://jsfiddle.net/sublay/HCajr/

Related question JavaScript to jQuery syntax Building custom CSS horizontal menu

解决方案

You're missing parenthesis on most of your calls.

Declaring the height should look like this

$('ul#navmenu').height($('ul#navmenu').parent().height() -1)

You need to use .parent() not .parent

$('ul#navmenu').parent().bind('mouseover'

Below, it seem as if you are trying to first the first available ul within #navmenu. When you use [0] you're actually calling .get() which converts the jQuery object to a javascript DOM element. Doing that will remove the ability for you to run jQuery functions against it. Also, chaining doesn't happen like that for selectors. Also, .css() will accept an object with key:value pairs.

$(this).find('ul:first').css({
    "visibility" : "visible",
    "z-index" : 0
});

Once again, missing the () for .parent()

$('ul#navmenu').parent().bind('mouseout',

And again, the selector chain is wrong.

$(this).find('ul:first').css({
    "visibility" : "hidden",
    'z-index' : 100
});

这篇关于JavaScript到jQuery语法在转换方面仍需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！