Question

我昨天开始使用jQuery和JavaScript并遇到错误。

我想要的只是在H1标签之后随机放置广告（所以假设在2 = 5 AdPosition的网页上有10个H1），现在在随机选择H1后添加5个AdBlock。

听起来很简单，但我无法实现这一点......：/因为jQuery或myCode只粘贴一个AdBlock。

JsFiddle：http://jsfiddle.net/byt3w4rri0r/eCBCK/ - 工作！

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的：

//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);

Answer 1

使用此行

if ($(".headline").hasClass('advertised') == true)

您正在检查是否已公布任何（！）.headline元素。在第一步之后，总会有一个已经广告的.headline，所以这种比较将是真的。

您想要做的事情：检查当前索引的.headline是否已被公布

if ($(".headline").eq(random_position).hasClass('advertised') == true)

除此之外，您还将“广告”类添加到所有（！）您的h1.headline元素中。这就是你想做的事情

$('h1.headline').eq(random_position).addClass('advertised');

编辑：这是来自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');
        }
}

Answer 2

如果我错了，有人会纠正我，但是你正在为所有的h1元素添加“广告”类，这意味着在第二个循环中你正在测试是否已经将广告添加到h1中，这将是现在总是如此，不再添加添加

Answer 3

使用jQuery的链接功能：

$('h1:eq('+random_position+')').append('<div class="google_ad1"></div>').addClass('advertised');

这只会将advertised类添加到您刚刚附加到的H1中。

jQuery / JavaScript for-Loop和.append

3 个答案: