如何为使用 JS 创建的类设置样式答案

【问题标题】：how to style a class created with JS如何为使用 JS 创建的类设置样式
【发布时间】：2021-12-01 16:00:11
【问题描述】：

我在一个电影网站上工作。在主页上，我创建了两个按钮，一个用于网格视图，另一个用于列表视图。网格视图的类是animation-2项，列表视图的类是animation-2项liststyle（liststyle是用js添加的）当用户单击列表按钮时使用JS列表样式类，添加到主类和视图中我的帖子将根据我在本课程中应用的样式进行更改。现在的问题是，当我应用了一些样式并将图像隐藏在列表视图中时，它工作正常，但现在当我在我的主类上应用样式时，意味着网格视图相同的样式正在应用于我的列表视图。这是我的代码：

<script>
jQuery('.grid').click(function(){
    jQuery('.animation-2').removeClass('liststyle');
});
jQuery('.list').click(function(){
    jQuery('.animation-2').addClass('liststyle');
});
</script>



<style>
.tablinks.selected{
 color:red;
 }
.tablinks.selected{
 background-color: #FDB813;
 color: white;
}
.liststyle article div img{
    display: none!important;
}
.liststyle .poster{
    height: auto!important;
    padding-top: 10%!important;
}
.liststyle article{
    width: 100%!important;
    height: auto!important;
}
</style>

上面的代码工作正常，所有样式现在都可以工作我想在我的网格视图上隐藏一个类 rawsub，但在列表视图上应用了相同的样式，因为我只给出了主类动画 2 项的引用，但仍然是样式正在应用animation-2 项目liststyle 类。这是我的 rawsub 类的代码：

 <article id="post-<?php the_ID(); ?>" class="item <?php echo $posttype; ?>">
 <div class="poster" style="padding-top: 1%!important; padding-bottom: 1%!important;">
    <a href="<?php the_permalink() ?>">
    <img src="<?php echo dbmovies_get_poster($post->ID); ?>" alt="<?php the_title(); ?>">
    </a>
    <div class="rawsub">
    <span class="rawsub"><?php the_field('type3'); ?></span>
    <span class="rawsub"><?php the_field('type'); ?></span>
    <span class="rawsub"><?php the_field('type2'); ?></span>
    <a href="<?php the_permalink() ?>">
    <h3 class="rating"><?php the_title(); ?></h3>
    </a>
    </div>
    <span class="posttime">
        <?php the_time( 'g:i a' ); ?>
    </span>

【问题讨论】：

标签： php html css wordpress

【解决方案1】：

添加此代码，它将从网格视图中删除 rawsub，并且不会更改列表视图

.animation-2.items article .rawsub span:nth-child(1){
 display:none;
 }
 .animation-2.items.liststyle article .rawsub span:nth-child(1){
 display:inline-block!important;
  }

【讨论】：

【解决方案2】：

正如你所说，你想隐藏 rawsub 类，

试试这个，

var rawsub_elements = jQuery('.rawsub'); // take all elements with class rawsub on page load

现在您在rawsub_elements 中拥有类 rawsub 的元素，

尝试在您要添加和删除 liststyle 类的 jQuery 代码中添加以下语句，

rawsub_elements.each(function() {
    $(this).toggleClass("rawsub");
});

这将在具有 rawsub 作为类名的元素上切换类 rawsub，这意味着如果类 rawsub 存在，则 toggleClass 将隐藏类名，并且当类 rawsub 隐藏/不存在时，toggleClass 会将类名 rawsub 添加到元素。

【讨论】：