Динамический стиль - манипулирование CSS с помощью JavaScript

Question

У меня есть слайдер изображения в теме worress, в котором в настоящее время используются встроенные стили для изменения отображения от блока до ни одного, в зависимости от того, какой слайд он есть. Есть ли способ отделить это, чтобы он динамически менялся в js, а не с помощью встроенного стиля? Он меняется на отображение блока, когда он становится текущим слайдом.

HTML:

<div class="single_fading_slide staged_slide" style="display: none;"> 
    <div class="positioning load_slide_image"> 
     <span id="355_img_1"> 
     <img src="http://imagehere" title="" alt="" width="960" height="340"   class="slide_image"> 
     </span> 
    </div><!-- .positioning .slide_image --> 
<div class="slide_overlay"></div> 
</div> 

Сценарий: Я новичок в JS, так что любая помощь приветствуется. Я уверен, что не все это относится, но хотелось включить его, чтобы вы могли его увидеть.

<script type="text/javascript"> 
/* <![CDATA[ */ 


jQuery(document).ready(function(){ 

    // Add class nopreload to all images in 'slide_content' div 
    if(jQuery('.slide_content').length>0) { 
     jQuery('.slide_content').find('img').addClass('nopreload'); 
    } 

      jQuery('#fading_slides').preloader({ 
      imgAppend: '.load_slide_image', 
      fade: false, 
      slider: true, 
      onDone: function(){ 
       jQuery('#slider_module .mysite_preloader_large').remove(); 
       jQuery('.slider_nav').tabs('#fading_slides > div.single_fading_slide', { 
        effect: 'fade', 
        fadeInSpeed: 'fast', 
        rotate: true, 
        onBeforeClick : function(event,index) { 
         if(this.getPanes().eq(index).children().eq(0).find('.vimeo_video').length>0) { 
          var vimeo_video = this.getPanes().eq(index).children().eq(0).find('.vimeo_video').parent().html(); 
          this.getPanes().eq(index).children().eq(0).find('.vimeo_video').parent().empty().html(vimeo_video); 
          jQuery('.vimeo_video').each(function(index, vimeo_video){ 
           Froogaloop.init([vimeo_video]); 
           vimeo_video.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded); 
          }); 
         } 
         if(this.getPanes().eq(index).children().eq(0).find('.youtube_video').length>0) { 
          var vimeo_video = this.getPanes().eq(index).children().eq(0).find('.youtube_video').parent().html(); 
          this.getPanes().eq(index).children().eq(0).find('.youtube_video').parent().empty().html(vimeo_video); 
          jQuery('.youtube_video').each(function(index, youtube_video){ 
           onYouTubePlayerAPIReady(youtube_video.id); 
          }); 
         } 
         _class = this.getPanes().eq(index).attr('class'); 
         jQuery('#slider_module_inner').removeClass(); 
         jQuery('#slider_module_inner').addClass(_class.replace('single_fading_slide ', '')); 

         if(this.getPanes().eq(index).children().eq(0).find('.vimeo_video').length>0 && typeof navScript != 'undefined'){ 
          setTimeout(function(){ 
           jQuery('.slider_nav_thumb .slider_nav').animate({opacity:0},300); 
           jQuery('.slider_nav_thumb .slider_nav').animate({height:'0px'},300); 
           }, 1000); 
         } 
        }, 
        onClick : function(event,index) {} 

       }).slideshow({clickable:false, autoplay:true, interval:4000, autopause:true}); 
       jQuery('#fading_slides').removeClass('noscript'); 
       jQuery('.slider_nav').removeClass('noscript'); 
      } 
     }); 


}); 
/* ]]> */ 
</script> 

Большое спасибо за помощь!

Answer 1

Вы можете использовать JQuery-х .show() и .hide(), чтобы справиться с этим:

$('#selector').show(); 
$('#selector').hide(); 

Я очень рекомендую потратить некоторое время на чтение документации по API JQuery, я уверен, что вы были бы в состоянии уменьшить количество кода требуется много.