基本上，我正在尝试创建测验，我正在使用光滑插件来实现轮播效果。仅在选择答案后，才应启用下一个按钮。在页面加载时，为特定问题选择答案后，将禁用下一个按钮。如果单击“下一步”，则将得到下一个问题，因为该“下一步”按钮应被禁用。选择答案后，启用下一个按钮，依此类推。
HTML代码：
<!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></pre>
<div>
<ul>
<li><input type="radio" id="radio_1_1" name="q_1" value="on"></li>
<li class="code">
<pre><code class="javascript hljs"><h1>{fetch()}<<span class="hljs-regexp">/h1></span></code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_1_2" name="q_1" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentWillMount</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_1_3" name="q_1" value="on"></li>
<li class="code">
<pre><code class="javascript hljs"><h1>{fetch}<<span class="hljs-regexp">/h1></span></code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_1_4" name="q_1" value="on"></li>
<li class="code">
<pre><code class="javascript hljs"><h1>${fetch}<<span class="hljs-regexp">/h1></span></code></pre>
</li>
</ul>
</div>
</div>
<div id="q_id_2">
<h4 style="text-align: left;">2) Which method in a React Component should you override to stop the component from updating?</h4>
<pre></pre>
<div>
<ul>
<li><input type="radio" id="radio_2_1" name="q_2" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">willComponentUpdate</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_2_2" name="q_2" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">shouldComponentUpdate</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_2_3" name="q_2" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentDidUpdate</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_2_4" name="q_2" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentDidMount</code></pre>
</li>
</ul>
</div>
</div>
<div id="q_id_3">
<h4 style="text-align: left;">3) What's used to pass data to a component from outside?</h4>
<pre></pre>
<div>
<ul>
<li><input type="radio" id="radio_3_1" name="q_3" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">setState</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_3_2" name="q_3" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">render <span class="hljs-keyword">with</span> <span class="hljs-built_in">arguments</span></code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_3_3" name="q_3" value="on"></li>
<li class="code">
<pre><code class="javascript hljs"> PropTypes</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_3_4" name="q_3" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">props</code></pre>
</li>
</ul>
</div>
</div>
<div id="q_id_4">
<h4 style="text-align: left;">4) Which method in a React Component is called after the component is rendered for the first time?</h4>
<pre></pre>
<div>
<ul>
<li><input type="radio" id="radio_4_1" name="q_4" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentDidUpdate</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_4_2" name="q_4" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentDidMount</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_4_3" name="q_4" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentMounted</code></pre>
</li>
</ul>
<ul>
<li><input type="radio" id="radio_4_4" name="q_4" value="on"></li>
<li class="code">
<pre><code class="javascript hljs">componentUpdated</code></pre>
</li>
</ul>
</div>
<button id="submit_button">Submit</button>
<br />
</div>
</div>
<script type="text/javaScript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javaScript" src="js/slick.min.js"></script>
<script type="text/javaScript" src="js/script.js"></script>
</body>
</html>
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');
})
答案 0 :(得分：0)
添加和删除类，并将指针事件设置为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");
});