jQuery：從點擊的對象中抓取文本（）

我知道有很多類似這個問題的問題，但沒有一個與我目前的問題似乎一樣（如果對此重複抱歉）。jQuery：從點擊的對象中抓取文本（）

我想在這裏創建的是一個腳本，點擊一個鏈接後，取鏈接名稱和類型，並在文件夾中找到它。然後，一旦找到它，將它添加到特定容器（我們的例子中爲#content）內的DOM中。

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>

我似乎並沒有得到任何錯誤，雖然;這很奇怪。感謝您的任何幫助。

來源

2010-10-31 mattelliottIT

您可以發佈單擊時調用此函數的鏈接的HTML嗎？ – 2010-10-31 06:26:18

在整個html中編輯。 – mattelliottIT 2010-11-02 22:41:12

感謝您的幫助。 – mattelliottIT 2010-11-02 22:41:37

我想現在我將使用以下來獲得這個功能。我沒有時間做實驗。

感謝您的幫助！再次

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

感謝：

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;" />'); 
     } 
    }

然後調用它。如果我想出一個更有效的方式來處理這個問題，會更新。

來源

2010-11-08 18:27:36 mattelliottIT

在開發JavaScript時，您可能需要將「var」放在您聲明的變量前面。使用不同於「string」這個詞作爲變量的東西是一個好主意，因爲它可能會導致名稱衝突。

如何發佈正確的HTML，所以我可以看看？

來源

2010-10-31 06:27:40 Herr

HTML已過帳。謝謝！ – mattelliottIT 2010-11-05 23:23:34

你爲什麼不這樣做：

$(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" />') 
}); 
});

和DROP內聯onclick處理，我假設你已經設置爲運行獲得OS 3.0（）。

來源

2010-10-31 08:10:53 bozdoz

這將工作，但類型未用您的方法定義。 – mattelliottIT 2010-11-02 22:40:37

減少你知道一種方法來從標籤抓住它嗎？ – mattelliottIT 2010-11-02 22:40:53

這幾乎工作。但現在我遇到麻煩的是抓取名稱標籤的價值。 Sooo clooose！ Arrgh haha 感謝您的幫助！ – mattelliottIT 2010-11-05 23:19:17

jQuery：從點擊的對象中抓取文本（）

回答

相關問題