Question

我知道有很多问题与此类问题类似，但其中没有一个问题与我目前的问题相同（如果对此重复感到抱歉）。

我想在这里创建的是一个脚本;单击链接后，获取链接名称并键入并在文件夹中找到它。然后，一旦找到它，就将它添加到特定容器内的DOM中（在我们的例子中为#content）。

jQuery似乎不想从even.target中获取文本（参见代码）。我还在学习jQuery，所以这对你来说可能看起来很愚蠢，所以请你好好/耐心。

CODE：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Matt Elliott \\ Web Development \\ Video Production</title>
<link rel="stylesheet" href="main.css" media="screen" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">

    $(document).ready(function()
    {
        //init vars
        var adMenu = $('#adMenu');
        var webMenu = $('#webMenu');
        var videoMenu = $('#videoMenu');
        var ad_btn = $('#adToggle');
        var web_btn = $('#webToggle');
        var video_btn = $('#videoToggle');
        var nav = $('nav');

        //init settings
        adMenu.css({'opacity' : '0.0', 'visibility' : 'hidden'});
        webMenu.css({'opacity' : '0.0', 'visibility' : 'hidden'});
        videoMenu.css({'opacity' : '0.0', 'visibility' : 'hidden'});

        //-------------------------------FUNCTIONS------------------------------\\

        //event listeners
        $('#main li, #prevContent, #nextContent').mouseover(function()
        { 
            $(this).animate({'backgroundColor' : '#F90'}, 1000, 'easeOutElastic');
        });

        $('#main li, #prevContent, #nextContent').mouseleave(function()
        { 
            $(this).animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');
        });

        ad_btn.click(function() 
        {
            if(videoMenu.css("opacity") == 1.0)
            {
                videoMenu.animate({opacity: 0.0}, 500);
                video_btn.removeClass('selected');
            }
            else if(webMenu.css("opacity") == 1.0)
            {
                webMenu.animate({opacity: 0.0}, 500).removeClass('selected');
                web_btn.removeClass('selected');
            }

            adMenu.css({'visibility' : 'visible'});
            adMenu.animate({opacity: 1.0}, 2000);
            ad_btn.addClass('selected');
            ad_btn.unbind('mouseleave');
        });

        web_btn.click(function() 
        {
            if(adMenu.css("opacity") == 1.0)
            {
                adMenu.animate({opacity: 0.0}, 500).removeClass('selected');
            }
            else if(videoMenu.css("opacity") == 1.0)
            {
                videoMenu.animate({opacity: 0.0}, 500).removeClass('selected');
            }

            webMenu.css({'visibility' : 'visible'});
            webMenu.animate({opacity: 1.0}, 2000);
            web_btn.addClass('selected');
        });

        video_btn.click(function() 
        {
            if(adMenu.css("opacity") == 1.0)
            {
                adMenu.animate({opacity: 0.0}, 500).removeClass('selected');
            }

            else if(webMenu.css("opacity") == 1.0)
            {
                webMenu.animate({opacity: 0.0}, 500).removeClass('selected');
            }
            videoMenu.css({'visibility' : 'visible'});
            videoMenu.animate({opacity: 1.0}, 2000);
            video_btn.addClass('selected');
        });

        adMenu.click(function()
        {
            adMenu.animate({opacity: 0.0}, 200, function()
            {
                adMenu.css({'visibility' : 'hidden'});
                ad_btn.removeClass('selected');
                ad_btn.animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');
                ad_btn.mouseleave(function() { 
                    $(this).animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');
                });
            });
        });

        webMenu.click(function()
        {
            webMenu.animate({opacity: 0.0}, 200, function()
            {
                webMenu.css({'visibility' : 'hidden'});
                web_btn.removeClass('selected');
                web_btn.animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');
                web_btn.mouseleave(function() { 
                    $(this).animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');
                });
            })
        });

        videoMenu.click(function()
        {
            videoMenu.animate({opacity: 0.0}, 200, function()
            {
                videoMenu.css({'visibility' : 'hidden'});
                video_btn.removeClass('selected');
                video_btn.animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');
                video_btn.mouseleave(function() { 
                    $(this).animate({'backgroundColor' : '#000'}, 300, 'easeInElastic');    
                });

            });
        });

    });

    function getThis(event,type)
    {
        string = $(event.target).text();
        filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');

        if(type == 'jpg') {
            $('#content').append('<img src="_work/ads/' + filename + '.jpg" />');
        }
        else if(type == 'swf') {
            $('#content').append('<embed src="_work/ads/' + filename + '.swf" />');
        }
    }




</script>

<script type="text/javascript">
    document.createElement('header');
    document.createElement('nav');
    document.createElement('article');
    document.createElement('section');
    document.createElement('footer');
    document.createElement('canvas');
</script>
</head>

<body>
<header>
    <h1>mattelliott.it</h1>
    <nav>
        <ul id="main">
            <li id="adToggle"><h2>ads</h2></li>
            <li id="webToggle"><h2>web</h2></li>
            <li id="videoToggle"><h2>video</h2></li>
            <li><h2>contact</h2></li>
        </ul>

        <!-- menu divs to fade in -->
        <div id="adMenu">
            <ul>
                <li><a href="javascript:getThis('jpg');">bing</a></li>
                <li><a href="#">emirates airlines</a></li>
                <li><a href="#">fast forward</a></li>
                <li><a href="#">prosche</a></li>
            </ul>
        </div>

        <div id="webMenu">
            <ul>
                <li><a href="#">kashmere</a></li>
                <li><a href="#">christopher stewart</a></li>
                <li><a href="#">the gel lab</a></li>
                <li><a href="#">erin foote</a></li>
                <li><a href="#">cicis pizza</a></li>
                <li><a href="#">pepsi natural</a></li>
                <li><a href="#">totally rad</a></li>
            </ul>
        </div>

        <div id="videoMenu">
          <ul>
                <li><a href="#">pepsi natural</a></li>
                <li><a href="#">chasing numbers trailer</a></li>
                <li><a href="#">gel lab shred session</a></li>
          </ul>
        </div>
    </nav>
</header>

<div id="wrapper">
    <section id="content">
        <!-- <img src="_work/ads/bing.jpg" /> -->
        <div id="contentControl">
            <a id="prevContent" href="#"></a>
            <a id="nextContent" href="#"></a>
        </div>
    </section>
</div>

我似乎没有任何错误;这很奇怪。感谢所有人和任何帮助。

Answer 1

在开发javascript时，您可能必须将“var”放在您声明的变量前面。使用不同的单词“string”作为变量是一个好主意，因为它可能导致名称冲突。

如何发布正确的HTML，以便我可以看看？

Answer 2

你为什么不这样做：

$(function(){
$('a').click(function(){
        var link = $(this).text();
        var filename = link.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');

        if(type == 'jpg') {
            $('#content').append('<img src="_work/ads/' + filename + '.jpg" />');
        }
        else if(type == 'swf') {
            $('#content').append('<embed src="_work/ads/' + filename + '.swf" />')
});
});

删除内联onClick处理程序，我假设你已设置运行getThis（）。

Answer 3

我想现在我将使用以下内容来实现此功能。我没时间进行实验了。

感谢您的帮助！

function getThis(name, type)
    {
        var filename = name.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');

        if(type == 'jpg') {
            $('#content').append('<img src="_work/ads/' + filename + '.jpg" />');
        }
        else if(type == 'swf') {
            $('#content').append('<embed src="_work/ads/' + filename + '.swf" style="z-index:4;" />');
        }
    }

然后调用它：

<li><a href="javascript:getThis('bing','jpg','1');">bing</a></li>

再次感谢。如果我想出一种更有效的方法来处理这个问题，我会更新。

jQuery：从点击的对象中抓取text（）

3 个答案: