问题描述
到目前为止，我有以下解决方案，该解决方案适用于第一次点击，但之后不起作用。
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 (将#修改为@）