为什么只有一篇文章标记它的样式发生了变化?

尼克·德鲁塔

我正在编写代码,这样我就可以获得随机的文章宽度。该网站已安装在WordPress上。我的php从WordPress服务器获取文章,并在页面上列出它们:

    while(have_posts()) { 
            the_post();?>
            <article id="demo" style="border:1px solid black">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
            </article>
        
    <?php } 
?>

我的ID演示文章脚本:

<script>
var x = 100/(Math.floor(Math.random() * 3)+1);
document.getElementById("demo").style.width = x + "%";
</script>

我想我需要在脚本中引入for循环,以便所有文章都能获得这种宽度变化?

马格努斯·埃里克森

使用jQuery,您可以执行以下操作(假设您已更改id="demo"class="demo"

// This fetches all elements with the class "demo" and iterates through them
$('.demo').each(function () {
    // Let's generate the new width for this specific element
    let newWidth = 100/(Math.floor(Math.random() * 3)+1) + '%';

    // In here, "this" is the current element and we pass it into jQuery to get
    // a jQuery object back just to simplify things
    $(this).css({width: newWidth});
});

您可以.each()jQuery手册中了解更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么get_posts函数显示除一篇文章以外的所有文章?

为什么我循环中的第一篇文章意外缩进

如何只编辑一篇文章而不是迭代循环所有文章?

是否有可能获得一篇文章被引用的次数?

共同作者加上Wordpress插件-列出同一篇文章的所有作者

如何滚动到具有相同类的下一篇文章 ON SCROLL

WordPress的第一篇文章只在首页上有所不同

Table 使用 yajra/laravel-datatables 为一篇文章带来所有评论

Meteor - 发布所有作者且仅发布最后一篇文章的最佳方法

Rails App中的上一篇文章

只选择作者的最后一篇文章

用laravel记录一篇文章的浏览次数?

渲染另一篇文章的引用

Wordpress 只显示一篇文章

显示wordpress的第一篇文章

链接到Blogdown中的另一篇文章

在MATLAB中复制一篇文章的图

获取Instagram用户的第一篇文章

Joomla显示内容的另一篇文章

PHP - Wordpress 上一篇文章链接显示在最后一篇文章中

浏览网站上一篇/下一篇文章的最佳方法

正在对我写的一篇文章进行 QA,我不知道为什么最后一个 if 语句不会返回任何内容

将一篇文章标记为“精选”以显示在Drupal 7的分类登陆页面中

删除第一篇文章并在PHP中显示第二篇文章

如何从一篇文章中获取所有段落而不是一个段落?

Wordpress WP_Query获得具有相同类别的下一篇文章

按下一篇文章对文章列表进行排序

下一篇和上一篇文章以相同的术语链接自定义分类法

下一个上一篇文章在WordPress中