Как отключить следующую кнопку в плагине Slick? - PullRequest
Новая
       8

Как отключить следующую кнопку в плагине Slick?

0 голосов
/ 08 января 2019

В основном я пытаюсь создать викторину, я использую плагин Slick для эффекта карусели. Только при выборе ответа следующая кнопка должна быть включена. При загрузке страницы следующая кнопка отключается после выбора ответа на этот конкретный вопрос, когда следующая кнопка активируется. Если мы нажмем на следующий, мы получим следующий вопрос, при этом следующая кнопка должна быть отключена. После выбора ответа для этого включается следующая кнопка и т. Д.

HTML-код: 

<code>    <!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <link rel="styleSheet" href="css/slick.css"/>
      <link rel="styleSheet" href="css/style.css"/>
   </head>
   <body>
   <!-- <button>+</button>
   <button>-</button> -->
      <div class="parent_container one-time">
         <div id="q_id_1">
            <h4 style="text-align: left;">1) How do you access a function fetch() from a h1 element in JSX?</h4>
            <pre>
  • <code class="javascript hljs">&lt;h1&gt;{fetch()}&lt;<span class="hljs-regexp">/h1&gt;</span></code>
  • <code class="javascript hljs">componentWillMount</code>
  • <code class="javascript hljs">&lt;h1&gt;{fetch}&lt;<span class="hljs-regexp">/h1&gt;</span></code>
  • <code class="javascript hljs">&lt;h1&gt;${fetch}&lt;<span class="hljs-regexp">/h1&gt;</span></code>

2) Какой метод в компоненте React следует переопределить, чтобы остановить обновление компонента? 


            

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">willComponentUpdate</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">shouldComponentUpdate</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">componentDidUpdate</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">componentDidMount</code>
    
                  
    • 
               

            

         

         

            
 3) Что используется для передачи данных компоненту извне? 

            

            

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">setState</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">render <span class="hljs-keyword">with</span> <span class="hljs-built_in">arguments</span></code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs"> PropTypes</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">props</code>
    
                  
    • 
               

            

         

         

            
 4) Какой метод в компоненте React вызывается после первого визуализации компонента? 

            

            

               
    
                  
  •   
  • 
                     
    <code class="javascript hljs">componentDidUpdate</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">componentDidMount</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">componentMounted</code>
    
                  
    • 
               

               
    
                  
  •   
    • 
                  
  • 
                     
    <code class="javascript hljs">componentUpdated</code>
    
                  
    • 
               

            

                   
                   

         

       
       
         
         
   




 Css код: 



ul li {
  display: inline-block;
}
ul {
  list-style-type: none;
}




 Js код: 



$('.one-time').slick({
 dots: false,
  infinite: false,
  speed: 800,
  slidesToShow: 1,
  adaptiveHeight: true,
   onAfterChange: function(slide, index) {
        if(index){
         $('button.slick-next.slick-arrow').attr('disabled','disabled');
        }
    }
});
$('input[type="radio"]').on('click',function(){
    $('button.slick-next.slick-arrow').removeAttr('disabled');
})













 



 

 





 




 





1 Ответ












0 голосов 























 / 

08 января 2019












 Добавить и удалить класс и установить для событий указателя значение none 



.btn-disabled{
    opacity: .5 !important;
    pointer-events:none !important;
}




 Также добавьте класс перед изменением 



$('.one-time').on('beforeChange', function(event, slick, currentSlide){
         $('button.slick-next.slick-arrow').addClass("btn-disabled");
});




https://jsfiddle.net/whsn47qk/2/







 
 

 





 

 



 


 

 

 


...