我正在尝试通过“ classList.add”将样式更改为组件,但是由于某些原因,它适用于前两个元素,而其余所有元素都采用了新类。 是否有任何原因会导致这种情况发生,以及如何解决该问题? 基本上,页面中的按钮具有不透明度:0.3,通过选择并回答按钮,该按钮将从禁用状态变为活动状态,并且不透明度应为1
谢谢 这是我的示例:
for (let i = 0; i < option.length; i++) {
[].forEach.call(opts, (el) => {
el.addEventListener("click", btnClick, false);
});
option[i].addEventListener("click", function() {
// console.log(option[i])
// console.log('CLICKED') // click on answer
move.classList.add("active");
nextSecond.classList.add("active");
nextThird.classList.add("active");
nextFour.classList.add("active");
nextFive.classList.add("active");
nextSix.classList.add("active");
nextSeven.classList.add("active");
});
}
function btnClick() {
[].forEach.call(opts, (el) => {
if (el !== this) el.classList.remove("selected");
});
this.classList.add("selected");
$(".next").removeAttr("disabled");
$(".nextSecond").removeAttr("disabled");
$(".nextThird").removeAttr("disabled");
$(".nextFour").removeAttr("disabled");
$(".nextFive").removeAttr("disabled");
$(".nextSix").removeAttr("disabled");
$(".nextSeven").removeAttr("disabled");
}
.btn {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 42px;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
color: #4BA21C;
border: 1px solid black;
width: 220px;
border-radius: 23px;
border: 2px solid #4BA21C;
height: 46px;
background-color: white;
&.btn-left {
margin-left: -56px;
}
&:hover {
cursor: pointer;
}
&.back,
&.next,
&.nextSecond,
&.nextThird.ans.active,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
width: 116px;
}
&.back {
color: #5C5C5C;
border: 2px solid #5C5C5C;
background-color: white;
}
&.next,
&.nextSecond,
&.nextThird,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
margin-right: 33px;
opacity: 0.3;
}
&.nextFour,
&.nextFive,
&.nextSix {
margin-right: -14px;
}
}
.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Question Page 3 -->
<div class="questionsPageThree hide">
<p class="number">3/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2 class="three">3. Do you have someone who you feel comfortable sharing your feelings with?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
✓ Yes
</button>
<button class="options choosen" type="submit" value="0">
x No
</button>
</div>
<div class="right">
<div class="image-right question3"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextThird ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
<!-- Question Page 4 -->
<div class="questionsPageFour hide">
<p class="number">4/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2>4. How many times this week would you say you felt stressed to the point of worry?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
<h4> 0</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="0">
<h4>1 - 2</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="-2">
<h4>3 + </h4>
<h6>TIMES</h6>
</button>
</div>
<div class="right">
<div class="image-right question4"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextFour ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
javascript html jquery css class