如何样式化使用JS创建的类

Question

我在一个电影网站上工作。在主页上，我创建了两个按钮，一个用于网格视图，另一个用于列表视图。网格视图的类是动画-2项目和列表视图的类是动画-2项目列表样式(列表样式是用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项的引用，但仍然在动画-2项列表样式类上应用样式。下面是我的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>

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

Answer 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添加到元素中。