0

我正在为concrete5设计一个主题。目前，在 5.6.2.1 版本中，Concrete5 使用 jQuery 1.7.2，我创建了一个 about-me bio 块，如下所示：

<div class="bio-block row" id="<?php echo rand(); ?>">
    <div class="bio-image 4u" style="text-align: center;">
    <img src="/path/to/pic" width="100%" style="max-width:239px;" margin="auto" alt="" />
</div>
<div class="bio-text 8u">
    <h2><span>Name</span>
 - Title</h2>

    <div class="bio">
    <p dir="ltr">Content</div>
</div>
</div>

在桌面上查看时，我希望每隔一个块在左侧交替图片，在右侧图片等。使用 jsfiddle，我已经使用以下方法来工作：

var c = jQuery(window).width();
console.log(c);
if (c >= 820){
    jQuery(".bio-block:nth-child(odd)").each(function() {
        if (id != null){
        jQuery("#"+id+" > .bio-image").before(jQuery("#"+id+" > .bio-text"));
    }
    });
} else {
    jQuery(".bio-block:nth-child(odd)").each(function() {
        if (id != null){
        jQuery("#"+id+" > .bio-image").after(jQuery("#"+id+" > .bio-text"));
    }
    });
}

但是当它在外部 js 文件中时，我无法让它在页面上执行。

我是否需要包括一些东西才能开始？也许是页面加载调用函数？

4

1 回答 1

1

您很可能在元素出现在页面上之前调用它。使用 dom 准备就绪。

$(function() {

    var c = jQuery(window).width();
    console.log(c);
    if (c >= 820){
        jQuery(".bio-block:nth-child(odd)").each(function() {
            jQuery(".bio-image").before(jQuery(".bio-text"));
        });
    } else {
        jQuery(".bio-block:nth-child(odd)").each(function() {
            jQuery(".bio-image").after(jQuery(".bio-text"));
        });
    }

});

另一个选项是在正文的末尾而不是在头部包含脚本标签。

于 2013-09-20T07:37:03.503 回答