Question

我有这个代码＆amp;我已经厌倦了使用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'));

它可能会奏效。谁能告诉我哪里出错？

任何帮助都得到了极大的赞赏，谢谢

Answer 1

从根本上说，它有效，但我怀疑你想替换 rotate-testimonials内容而不是追加（添加）它。所以最后一行是：

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

Live example

编辑：您已经说过，最终出现问题的是DIV#rotate-testimonials中没有任何内容。你应该看到某些东西，即使你的原始代码，所以这里有一些事情要检查：

您是否在DOM中存在div#rotate-testimonials之前运行代码？例如，上面的 div的脚本是不是包含在ready处理程序或类似内容中？这是一个容易犯的错误。 div必须存在才能写入，并立即运行脚本。在上面的示例中，请注意所有内容都包含在jQuery(function($) { ... });结构中，在DOM准备好进行操作之前不会调用该结构。您可以这样做，或者只是将您的脚本放在页面的最后，就在</body>标记之前。
你真的有id="rotate-testimonials"的div吗？例如，没有拼写错误或类似内容，它是id而不是name等。
您是否只有一个元素或具有该名称的其他全局对象？（简单的检查方法：在标记和脚本的id="..."中将名称更改为“fluglehorn”。如果它开始有效，则表示您还有一些名为 else 的名称{ {1}}在某个地方踢。当然，这假设你没有任何名为rotate-testimonials的东西......

如果不是那些东西，我就没有想法，但希望将你的工作与上面的工作版本进行比较会有所帮助。

偏离主题：也就是说，一些重构可以帮助您更轻松地将条目添加到推荐书等。而不是并行数组，我会使用一个对象数组，每个信息位（文本，标题，链接，图像）的属性。此外，您可以使用数组和对象文字表示法（而不是fluglehorn，然后使用一堆作业。

这是更改为数组文字符号的版本：

new Array();

Live copy

这是一个使用对象数组的最小重构版本：

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

你可以走得更远（当然，样式表最终会帮助那个庞大的字符串），但你明白了。

Answer 2

jQuery也有基本的.append（）方法，它应该运行得很好并且阅读起来更容易。

$('#rotate-testimonials').append('...')

Answer 3

您应该使用选择器而不是文本。放入DIV的选择器，用大量文本代替div内容，你应该没问题

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

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

如何在JQuery中使用appendTo（）函数显示此小部件？

3 个答案: