此功能可以正常使用，但是很痛。 CSS最初隐藏了除第一个pie-1类之外的所有类，但是我没有包括那部分，因为它并不那么重要。我拿出一些html只是为了使其看起来更简单。如您所见，jQuery是多余的，我相信有更好的方法可以做到这一点，但是我不确定如何清理此JS。
$(".committed").addClass("committed-active");
$(".committed").on("click", function() {
$(".pie-1").fadeIn("slow");
$(".committed").addClass("committed-active");
$(".pie-2, .pie-3, .pie-4, .pie-5").hide();
$(".inclined").removeClass("inclined-active");
$(".equipped").removeClass("equipped-active");
$(".empowered").removeClass("empowered-active");
$(".consent").removeClass("consent-active");
});
$(".inclined").on("click", function() {
$(".pie-2").fadeIn("slow");
$(".inclined").addClass("inclined-active");
$(".pie-1, .pie-3, .pie-4, .pie-5").hide();
$(".committed").removeClass("committed-active");
$(".equipped").removeClass("equipped-active");
$(".empowered").removeClass("empowered-active");
$(".consent").removeClass("consent-active");
});
$(".equipped").on("click", function() {
$(".pie-3").fadeIn("slow");
$(".equipped").addClass("equipped-active");
$(".pie-2, .pie-1, .pie-4, .pie-5").hide();
$(".inclined").removeClass("inclined-active");
$(".committed").removeClass("committed-active");
$(".empowered").removeClass("empowered-active");
$(".consent").removeClass("consent-active");
});
$(".empowered").on("click", function() {
$(".pie-4").fadeIn("slow");
$(".empowered").addClass("empowered-active");
$(".pie-3, .pie-2, .pie-1, .pie-5").hide();
$(".inclined").removeClass("inclined-active");
$(".equipped").removeClass("equipped-active");
$(".committed").removeClass("committed-active");
$(".consent").removeClass("consent-active");
});
$(".consent").on("click", function() {
$(".pie-5").fadeIn("slow");
$(".consent").addClass("consent-active");
$(".pie-2, .pie-3, .pie-4, .pie-1").hide();
$(".inclined").removeClass("inclined-active");
$(".equipped").removeClass("equipped-active");
$(".empowered").removeClass("empowered-active");
$(".committed").removeClass("committed-active");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-4 d-flex-align-center-left p-0">
<label class="interactive-text p-3 committed">Slide 1
<input name="interactive-1" type="radio" class="text-dark committed interactive-text">
</label>
<label class="interactive-text p-3 inclined">Slide 2
<input name="interactive-1" type="radio" class="text-dark inclined interactive-text">
</label>
<label class="interactive-text p-3 equipped">Slide 3
<input name="interactive-1" type="radio" class="text-dark equipped interactive-text">
</label>
<label class="interactive-text p-3 empowered">Slide 4
<input name="interactive-1" type="radio" class="text-dark empowered interactive-text">
</label>
<label class="interactive-text p-3 consent">Slide 5
<input name="interactive-1" type="radio" class="text-dark consent interactive-text">
</label>
</div>
<!-- slide 1 -->
<div class="col-lg-8 bg-lightgray round pie-1">
<h4 class="pie-header blue mb-3">slide 1</h4>
<div class="row">
<div class="pie">
<img src="images/pie-24.svg" alt="Donut chart for Feel More Committed section">
</div>
<div class="pie-aside d-flex-center-center">
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="col-lg-8 bg-lightgray round pie-2">
<h4 class="pie-header purple mb-3">slide 2</h4>
<div class="row">
<div class="pie">
<img src="images/pie-25.svg" alt="Donut chart for Feel More Committed section">
</div>
<div class="pie-aside d-flex-center-center">
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="col-lg-8 bg-lightgray round pie-3">
<h4 class="pie-header teal mb-3">slide 3</h4>
<div class="row">
<div class="pie">
<img src="images/pie-26.svg" alt="Donut chart for Feel More Committed section">
</div>
<div class="pie-aside d-flex-center-center">
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="col-lg-8 bg-lightgray round pie-4">
<h4 class="pie-header red mb-3">slide 4</h4>
<div class="row">
<div class="pie">
<img src="images/pie-27.svg" alt="Donut chart for Feel More Committed section">
</div>
<div class="pie-aside d-flex-center-center">
</div>
</div>
</div>
<!-- Slide 5 -->
<div class="col-lg-8 bg-lightgray round pie-5">
<h4 class="pie-header black mb-3">slide 5
</h4>
<div class="row">
<div class="pie">
<img src="images/pie-28.svg" alt="Donut chart for Feel More Committed section">
</div>
<div class="pie-aside d-flex-center-center">
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
只需创建类似于以下内容的函数。
function showOnClick(classToShow, classToFadeIn) {
// all initializations
var classesToShow = ["committed", "inclined", "equipped", "empowered", "consent"];
var classesToFade = ".pie-1, .pie-2, .pie-3, .pie-4, .pie-5";
// find the index of the class
var indexOfClassToShow = classesToShow.indexOf(classToShow);
// remove it from the array
classesToShow.splice(indexOfClassToShow, 1);
// remove the fade class - might not work for all cases and might be a better way to do it
classesToFade = classesToFade.replace("." + classToFade, "").replace(", , ", ", ");
// your repetitive code in one function
$("." + classToShow).on("click", function(){
$("." + classToFade).fadeIn("slow");
$("." + classToShow).addClass(classToShow + "-active");
$(classesToFade).hide();
$.each(classesToShow, function( index, value ) {
$("." + value).removeClass(value + "-active");
});
});}
我很抱歉，我的JS / jQuery有点生锈，我还没有测试过，因此需要进行一些调整，但是这个想法已经存在。你可以这样称呼它
showOnClick("committed", "pie-1");
showOnClick("inclined", "pie-2");
showOnClick("equipped", "pie-3");
showOnClick("empowered", "pie-4");
showOnClick("consent", "pie-5");