2011-03-01 53 views
0

我有這個代碼&我已經厭倦了使用JQuery的appendTo()函數來獲取這個小部件來顯示...有一些我失蹤,但我有麻煩引腳指向它。如何使用JQuery中的appendTo()函數顯示此小部件?

這裏是原代碼,見下圖:

var theText = new Array(); 
theText[0] = "David Footitt is absolutely delighted with them and the service he received.<br /><br />Regtransfers are definitely the first port of call whenever I or my colleagues are looking for a special number plate, he said."; 
theText[1] = "What was Prakash Patel's experience with Regtransfers?<br /><br />Great service, always keeping us up to date with related plates, transfers done very easily and value for money."; 
theText[2] = "4 MBE is one the best investments that I have made in recent years.<br /><br />Thanks to Regtransfers for making it such a simple and straightforward process. It's definitely got me thinking about others for the business."; 

var links = new Array(); 
links[0] = 'http://www.regtransfers.co.uk/number-plates-stories/new51.asp'; 
links[1] = 'http://www.regtransfers.co.uk/number-plates-stories/oo08cty.asp'; 
links[2] = 'http://www.regtransfers.co.uk/main/stories/4mbe.asp'; 

var title = new Array(); 
title[0] = '<strong>David Footitt</strong><br />(News Transport Ltd)<br />NEW 51'; 
title[1] = '<strong>Prakash Patel</strong><br />(City Inter-Rent)<br />OO08 CTY'; 
title[2] = '<strong>Sandeep Patel</strong><br />(Ambe Medical Group)<br />4 MBE'; 

var images = new Array(); 
images[0] = '/images_new/rotatingTestimonials/new51.jpg'; 
images[1] = '/images_new/rotatingTestimonials/oo08cty.jpg'; 
images[2] = '/images_new/rotatingTestimonials/4mbe.jpg'; 

var j = 0 
var p = theText.length; 

var whichImage = Math.round(Math.random()*(p-1)); 

document.write('<div style="padding:3px; border:1px solid #CCC;"><div style="background-image:url(/images_new/backgrounds/grey_gradient.jpg); background-repeat:repeat-x; text-align:center; font-weight:bold; font-size:90%; padding:5px;">Satisfied Customer</div><p align="center" style="font-size:11px;">' + title[whichImage] + '</p><p align="center" style="font-size:11px;"><img src="' + images[whichImage] + '" alt="Customer Testimonials" style="width:140px" /></p><p align="left" style="font-size:11px;">' + theText[whichImage] + '</p><p align="right" style="font-size:11px;"><a href="' + links[whichImage] + '">read more ...</a></p></div>'); 

我想如果我改變最後一行:

$('<div...long html string with the other variables').appendTo($('#rotate-testimonials')); 

它可能工作。誰能告訴我我要去哪裏錯?

任何幫助非常感謝,謝謝

+0

當你改變最後一行時會發生什麼?你用Firebug控制檯試過firefox嗎? – corroded 2011-03-01 09:44:09

+0

*「誰能告訴我我要去哪裏錯?」*不知道你看到了什麼結果,不。 – 2011-03-01 09:45:43

+0

@corroded - 在DIV#rotate-testimonials中沒有任何顯示,這是空的。只用疲憊的FF與螢火蟲控制檯&沒什麼:S – Nasir 2011-03-01 09:48:01

回答

3

從根本上說,它的工作原理,但我懷疑你想取代rotate-testimonials內容,而不是追加(添加)到它。所以,最後一行是:

$('#rotate-testimonials').html(...long string...); 

Live example

編輯:你說什麼對您的最終腳麻是什麼在DIV#rotate-testimonials顯示出來。你應該已經看到東西,即使你原來的代碼,所以這裏有一些事情要檢查:

  1. 你運行你的代碼存在於DOM前div#rotate-testimonials?例如,以上的腳本是div,而不是包裝在ready處理程序或類似的程序中?這是一個容易犯的錯誤。在寫入之前,div必須存在,並且腳本立即運行。在我上面的示例中,請注意,所有內容都被封裝在一個jQuery(function($) { ... });結構中,在DOM準備好可以操作之前不會調用它。您可以這樣做,或者只是將您的腳本放在頁面的最後,就在</body>標記之前。
  2. 你真的有id="rotate-testimonials"的div嗎?例如,沒有輸入錯誤或類似錯誤,它是一個id而不是一個name
  3. 你是否只有一個元素或其他具有該名稱的全局對象? (簡單的檢查方法:在id="..."的標記和腳本中將名稱更改爲「fluglehorn」如果它開始工作,這意味着您有其他其他也被稱爲rotate-testimonials踢在某處。你沒有任何東西叫fluglehorn ...

如果沒有這些東西,我沒有想法,但希望比較上面的工作版本將有所幫助。


題外話:這就是說,有點重構可以幫助更容易地添加條目推薦等,而不是並行陣列,我會使用對象的數組,用每個信息位(文本,標題,鏈接,圖像)的屬性。此外,您還可以使用數組和對象的文字符號(而不是new Array();,然後一堆作業的

這裏有一個版本,只是改變陣列文字符號:

var theText = [ 
    "David Footitt is absolutely delighted with them and the service he received.<br /><br />Regtransfers are definitely the first port of call whenever I or my colleagues are looking for a special number plate, he said.", 
    "What was Prakash Patel's experience with Regtransfers?<br /><br />Great service, always keeping us up to date with related plates, transfers done very easily and value for money.", 
    "4 MBE is one the best investments that I have made in recent years.<br /><br />Thanks to Regtransfers for making it such a simple and straightforward process. It's definitely got me thinking about others for the business." 
    ]; 

var links = [ 
    'http://www.regtransfers.co.uk/number-plates-stories/new51.asp', 
    'http://www.regtransfers.co.uk/number-plates-stories/oo08cty.asp', 
    'http://www.regtransfers.co.uk/main/stories/4mbe.asp' 
    ]; 

var title = [ 
    '<strong>David Footitt</strong><br />(News Transport Ltd)<br />NEW 51', 
    '<strong>Prakash Patel</strong><br />(City Inter-Rent)<br />OO08 CTY', 
    '<strong>Sandeep Patel</strong><br />(Ambe Medical Group)<br />4 MBE' 
    ]; 

var images = [ 
    '/images_new/rotatingTestimonials/new51.jpg', 
    '/images_new/rotatingTestimonials/oo08cty.jpg', 
    '/images_new/rotatingTestimonials/4mbe.jpg' 
    ]; 

var j = 0 
var p = theText.length; 

var whichImage = Math.round(Math.random()*(p-1)); 

$('#rotate-testimonials').html(
    '<div style="padding:3px; border:1px solid #CCC;"><div style="background-image:url(/images_new/backgrounds/grey_gradient.jpg); background-repeat:repeat-x; text-align:center; font-weight:bold; font-size:90%; padding:5px;">Satisfied Customer</div><p align="center" style="font-size:11px;">' + title[whichImage] + '</p><p align="center" style="font-size:11px;"><img src="' + images[whichImage] + '" alt="Customer Testimonials" style="width:140px" /></p><p align="left" style="font-size:11px;">' + theText[whichImage] + '</p><p align="right" style="font-size:11px;"><a href="' + links[whichImage] + '">read more ...</a></p></div>'); 

Live copy

這裏是一個最小重構版本,它使用一組對象來代替:

var entries = [ 
    { text: "David Footitt is absolutely delighted with them " + 
       "and the service he received.<br /><br />Regtransfers " + 
       "are definitely the first port of call whenever I or " + 
       "my colleagues are looking for a special number plate, he said.", 
     link: "http://www.regtransfers.co.uk/number-plates-stories/new51.asp", 
     title: "<strong>David Footitt</strong><br />(News Transport Ltd)<br />NEW 51", 
     image: "/images_new/rotatingTestimonials/new51.jpg" 
    }, 
    { text: "What was Prakash Patel's experience with Regtransfers?<br />" + 
       "<br />Great service, always keeping us up to date with related " + 
       "plates, transfers done very easily and value for money.", 
     link: "http://www.regtransfers.co.uk/number-plates-stories/oo08cty.asp", 
     title: "<strong>Prakash Patel</strong><br />(City Inter-Rent)<br />OO08 CTY", 
     image: "/images_new/rotatingTestimonials/oo08cty.jpg" 
    }, 
    { text: "4 MBE is one the best investments that I have made in recent " + 
       "years.<br /><br />Thanks to Regtransfers for making it such a " + 
       "simple and straightforward process. It's definitely got me " + 
       "thinking about others for the business.", 
     link: "http://www.regtransfers.co.uk/main/stories/4mbe.asp", 
     title: "<strong>Sandeep Patel</strong><br />(Ambe Medical Group)<br />4 MBE", 
     image: "/images_new/rotatingTestimonials/4mbe.jpg" 
    } 
]; 

var j = 0 
var p = entries.length; 

var whichImage = Math.round(Math.random()*(p-1)); 

$('#rotate-testimonials').html(
    '<div style="padding:3px; border:1px solid #CCC;"><div style="background-image:url(/images_new/backgrounds/grey_gradient.jpg); background-repeat:repeat-x; text-align:center; font-weight:bold; font-size:90%; padding:5px;">Satisfied Customer</div><p align="center" style="font-size:11px;">' + entries[whichImage].title + '</p><p align="center" style="font-size:11px;"><img src="' + entries[whichImage].image + '" alt="Customer Testimonials" style="width:140px" /></p><p align="left" style="font-size:11px;">' + entries[whichImage].text + '</p><p align="right" style="font-size:11px;"><a href="' + entries[whichImage].link + '">read more ...</a></p></div>'); 

Live copy

你可以走得更遠(當然一個樣式表最終會幫助那個大量的字符串),但你明白了。

+0

好人! (爲活的副本和重構) – johnhunter 2011-03-01 10:12:43

+0

J.Crowder - 感謝萬億的工作 – Nasir 2011-03-01 10:16:49

+0

@Nasir:好的交易,很高興幫助。 – 2011-03-01 10:22:46

0

您應該使用選擇器而不是文本。將在選擇用大量文字的DIV到位股利內容本身的,你應該罰款

<div id='theDiveID'>long html string with the other variables</div> 

$('#theDivID').appendTo('#rotate-testimonials'); 
1

jQuery也有基本的.append()方法,它應該工作得很好,讀起來更容易一些。

$('#rotate-testimonials').append('...') 
相關問題