jQuery: захват текста () из объекта, по которому щелкнули - PullRequest
Новая
       3

jQuery: захват текста () из объекта, по которому щелкнули

0 голосов
/ 31 октября 2010

Я знаю, что уже есть много вопросов, похожих на этот, но ни один из них, похоже, не совпадает с моей текущей проблемой (если извините за повтор).

Что я пытаюсьсоздать здесь сценарий, который будет;при нажатии на ссылку, взять имя и тип ссылки и найти ее в папке.Затем, как только он будет найден, добавьте его в DOM внутри определенного контейнера (в нашем случае это #content).

jQuery, похоже, не хочет получать текст из even.target (см. Код).Я все еще изучаю jQuery, так что это может показаться вам глупым и элементарным, поэтому, пожалуйста, будьте любезны / терпеливы.

КОД: 

<!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>

Мне не кажетсячтобы получить какие-либо ошибки, хотя;что странноСпасибо за все и любую помощь.

Ответы [ 3 ]

0 голосов
/ 31 октября 2010

Почему бы вам не сделать что-то вроде этого: 

$(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 ().

0 голосов
/ 08 ноября 2010

Полагаю, пока я буду использовать следующее, чтобы получить эту функцию. У меня мало времени для экспериментов.

Спасибо за помощь! 

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>

Еще раз спасибо. Будет ли обновление, если я придумаю более эффективный способ справиться с этим.

0 голосов
/ 31 октября 2010

при разработке javascript вам, возможно, придется поставить «var» перед объявленными вами переменными. Хорошая идея - использовать в качестве переменной нечто иное, чем слово «строка», поскольку это может привести к конфликту имен.

Как насчет публикации правильного HTML тоже, чтобы я мог посмотреть?

...