jQuery / JavaScript for-Loop和.append
[英]jQuery/JavaScript for-Loop and .append
问题描述
I started yesterday with jQuery and JavaScript and run into an error. 
我昨天开始使用jQuery和JavaScript，但遇到错误。
All I want is to place Ads randomly after an H1-Tag (so let's say there are 10 H1 on a page dived by 2 = 5 AdPosition) now add 5 AdBlocks after a randomly choosen H1. 我想要做的就是将广告随机放置在H1-Tag后面（假设在一个页面上有10个H1被2 = 5 AdPosition剥夺了），现在在随机选择的H1之后添加5个AdBlock。
Sounds pretty easy but I cant achieve this...: / because jQuery or myCode only paste one AdBlock. 听起来很简单，但我无法实现这一目标...：/，因为jQuery或myCode仅粘贴一个AdBlock。
JsFiddle: http://jsfiddle.net/byt3w4rri0r/eCBCK/ - working! JsFiddle： http : //jsfiddle.net/byt3w4rri0r/eCBCK/-工作正常！
MyHTML: MYHTML：
<body>
<div id="content-inner">
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
<h1 class="headline">Headline</h1>
</div>
</body>
MyJQUERY/JavaScript: MyJQUERY / JavaScript：
//count H1
var countH1 = parseFloat($("#content-inner h1").length)-1; //-1 because 0 is also a number!
//how often the ads should be displayed
var ad_count = Math.round(countH1 / 2);
//random helper
var min = 0;
var max = countH1;
//random position
for (counter = 0; counter < ad_count; counter++){
var random_position = Math.round((Math.random() * (max - min)) + min);
console.log("Random_Position:", random_position);
// paste google-code
if ($(".headline").hasClass('advertised') == true) {
random_position++;
console.log('already advertised!')
if (random_position > countH1) {
random_position--;
}
} else {
$('h1:eq('+random_position+')').append('<div class="google_ad1"></div>');
$('h1.headline').addClass('advertised');
}
}
console.log("CountH1 -1, because 0=1, 1=2,....", countH1);
console.log(werbung_anzahl);
console.log(zufall_position);
console.log(counter);
3 个解决方案
解决方案1
1 已采纳 2012-10-02 09:28:33
With this line 用这条线
if ($(".headline").hasClass('advertised') == true)
you are checking if any(!) of the .headline elements has already been advertised. 您正在检查.headline元素是否已播发。 And after the first step there is always one .headline that has been advertised, so this comparison will be true. 在第一步之后，总是会有一个.headline被广告，因此这种比较是正确的。
What you wanted to do: Check if the .headline with the current index has been advertised 您想做什么：检查带有当前索引的.headline是否已发布
if ($(".headline").eq(random_position).hasClass('advertised') == true)
On top of this, you are adding the class "advertised" to all(!) your h1.headline elements. 最重要的是，您要在所有（！）h1.headline元素中添加“广告”类。 This is what you wanted to do instead 这就是你想做的
$('h1.headline').eq(random_position).addClass('advertised');
EDIT: This is the full changed for loop from the latest fiddle at http://jsfiddle.net/eCBCK/19 编辑：这是从http://jsfiddle.net/eCBCK/19上最新提琴的循环的完全改变
for (counter = 0; counter < ad_count; counter++){
var random_position = Math.round((Math.random() * (max - min)) + min);
console.log("Random_Position:", random_position);
// paste google-code
if ($(".headline").eq(random_position).hasClass('advertised') == true) {
counter--;
console.log('already advertised!')
} else {
$('h1:eq('+random_position+')').append('<div class="google_ad1"></div>');
$('h1.headline').eq(random_position).addClass('advertised');
}
}
解决方案2
0 2012-10-02 09:28:36
如果我错了，请有人纠正我，但是您要向所有h1元素添加“广告”类，这意味着在第二个循环中，您正在测试是否已将广告广告添加到h1中，现在它将始终为正确，不再添加
解决方案3
0 2012-10-02 09:36:48
Use jQuery's chaining feature: 使用jQuery的链接功能：
$('h1:eq('+random_position+')').append('<div class="google_ad1"></div>').addClass('advertised');
This will only add the advertised class to the H1 that you just appended to. 这只会将advertised类添加到您刚刚附加到的H1中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.