Question

我正在为concrete5设计一个主题。目前，在5.6.2.1版中，Concrete5使用了jQuery 1.7.2我创建了一个像我这样的生物块：

<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文件中时，我无法让它在页面上执行。

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

Answer 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"));
        });
    }

});

其他选项是将脚本标记包含在正文的末尾而不是头部。

使用jQuery重新排序元素

1 个答案: