如何解决进度条 - 多步表单 - Javascript 问题
到目前为止,我有以下解决方案,该解决方案适用于第一次点击,但之后不起作用。
Javascript:
$(document).ready(function(){
var a = document.getElementsByClassName("progress-15");
var b = document.getElementsByClassName("progress-30");
var c = document.getElementsByClassName("progress-50");
var d = document.getElementsByClassName("progress-70");
var e = document.getElementsByClassName("progress-85");
var f = document.getElementsByClassName("progress-100");
window.addEventListener('click',function() {
if($("a").is(":visible")) {
document.getElementsByClassName("progress-bar")[0].style.width = "15%";
}
})
});
我想将“.progress-15”之类的类添加到表单中的步骤中。
到目前为止,它适用于 progress-15,但不适用于 progress-30。
HTML:
<!-- /Immobilienart > Grundstück ============================== -->
<div class="branch" id="Grundstück">
<div class="step" data-state="grundflaeche">
<div class="question_title progress-15">
<p>Um <strong>was für ein Grundstück</strong> handelt es sich?</p>
</div>
<div class="row">
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_0" name="branch_0_answers[]" type="radio" value="Bauland" class="required">
<label for="branch_0_answer_0"><img src="img/Bauland.svg" alt=""><strong>Bauland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_1" type="radio" name="branch_0_answers[]" value="Ackerland" class="required">
<label for="branch_0_answer_1"><img src="img/Ackerland.svg" alt=""><strong>Ackerland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_2" name="branch_0_answers[]" type="radio" value="Wald / Grünland" class="required">
<label for="branch_0_answer_2"><img src="img/Wald.svg" alt=""><strong>Wald / Grünland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_3" name="branch_0_answers[]" type="radio" value="Sonstiges" class="required">
<label for="branch_0_answer_3"><img src="img/Sonstiges.svg" alt=""><strong>Sonstiges</strong></label>
</div>
</div>
</div>
<!-- /row-->
</div>
<!-- /step -->
</div>
HTML(进度条):
<main>
<h1 id="hero">So verkaufen Sie Ihre Immobilie zum Top-Preis</h1>
<div class="container mb-5">
<div class="progress-rounded progress pmd-progress position-absolute"><div class="progress-bar progress-bar-info" style="width: 0%;"></div></div>
<!-- Preloader ============================== -->
<div data-loader="circle-side"></div>
<div id="wizard_container">
<form class="immobilienbewertung" name="example-1" id="wrapped" method="POST">
<input id="website" name="website" type="text" value="">
<!-- Leave input above for security protection,read docs for details -->
<div id="middle-wizard" class="h-75 mb-4 pt-2">
<!-- Immobilienart ============================== -->
<div class="step" data-state="branchtype">
<div class="question_title">
<p><strong>Welche Immobilie</strong> möchten Sie verkaufen?</p>
</div>
<div class="row mb-5">
<div class="col-md-3">
<div class="item" id="start">
<input id="answer_1" type="radio" name="branch_1_group_1" value="Grundstück" class="required">
<label for="answer_1"><img src="img/Grundstueck.svg" alt=""><strong>Grundstück</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_2" name="branch_1_group_1" type="radio" value="Wohnung" class="required">
<label for="answer_2"><img src="img/Wohnung.svg" alt=""><strong>Wohnung</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_3" name="branch_1_group_1" type="radio" value="Haus" class="required">
<label for="answer_3"><img src="img/Haus.svg" alt=""><strong>Haus</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_4" name="branch_1_group_1" type="radio" value="Gewerbe" class="required">
<label for="answer_4"><img src="img/Gewerbeimmobilie.svg" alt=""><strong>Gewerbe</strong></label>
</div>
</div>
</div>
<!-- /row-->
你知道我怎样才能让它工作吗?
非常感谢。
解决方案:
$(document).on('click',function(){
if($(".progress-0").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "0%";
}
if($(".progress-10").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "10%";
}
if($(".progress-20").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "20%";
}
if($(".progress-30").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "30%";
}
if($(".progress-40").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "40%";
}
if($(".progress-50").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "50%";
}
if($(".progress-60").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "60%";
}
if($(".progress-70").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "70%";
}
if($(".progress-80").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "80%";
}
if($(".progress-90").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "90%";
}
if($(".progress-100").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "100%";
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。