how to style a class created with JS-CodePudding

I am working on a movies website. On homepage I have created two buttons one for grid view and other for list view. The class for grid view is animation-2 items and class for list view is animation-2 items liststyle ( liststyle is added with js ) Using JS when user will click the list button list style class with be added in the main class and the view of my post will change according to the styling which i apply on this class. Now issue is as I have applied some styling and hide the images in list view it works fine til now but now when I am applying styling on my main class mean grid view same styling is applying on my list view. Here is my code:

<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>

The above code is working fine and all styles are working now I want to hide a class rawsub on my grid view but same styling is applied on list view as I am giving reference of only main class animation-2 items but still style is applying on animation-2 items liststyle class. Here is the code of my rawsub class:

 <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>

CodePudding user response：

Add this code it will remove rawsub from grid view and will not change the list view

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

CodePudding user response：

As you said you want to hide rawsub class,

Try this,

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

Now you have elements with class rawsub in rawsub_elements,

Try putting below statements in your jQuery code where you are adding and removing liststyle class,

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

This will toggle the class rawsub on elements having rawsub as class name, which means if class rawsub is present toggleClass will hide the class name and when class rawsub is hidden/not present toggleClass will add the class name rawsub to the element.