0
jqueryに関する質問があります。私は、現在のクラス要素 'li'の名前を含む配列を作成しました。別の要素をクリックして、前の項目から「アクティブ」クラスを削除し、配列に含まれるクラスを割り当てたいとします。このアクションの原因となるコードは次のとおりです。配列の要素にスコープを設定する方法 - Jquery？
$(document).ready(function(){
var classes = [];
$('li').each(function (index){
console.log(index + ':' + $(this).attr('class'));
classes = [$(this).attr('class')];
classes.toString();
console.log(classes);
});
$('FirstElement').click(function(){
if($('#FirstElement').hasClass('done')){
console.log('It has done class');
}else{
$(this).removeClass().addClass('active');
$('#SecondElement').removeClass('active').addClass(classes[1]);
$('#ThirdElement').removeClass('active').addClass(classes[2]);
$('#FourthElement').removeClass('active').addClass(classes[3]);
}
});
要素 'classes [0]'などは定義されていません。私はクラスの名前を 'classes [0]'などでどのように使うことができますか？お返事をありがとうございます。
EDIT：もちろんです。迅速な返信をありがとう。ここで
私のHTMLです：
<ul id="ListOfCircles" class="qz-steps" role="">
<span id="FirstElement_block">
<li id="FirstElement" class="next" role="">
<i id="FirstItemIcon" class="icon-done fa fa-check" onclick="changeToBasicInfo();"></i>
<div id="FirstItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px;margin-top: 0px;display:none">
<label class=" ThemeGrid_Width2" style="" for="">1</label>
</div>
<div id="FirstItemDescription" class="qz-step-desc" style="margin-top: 0px"></div>
</li>
</span>
<span id="SecondElement_block">
<li id="SecondElement" class="" role="">
<i id="SecondItemIcon" class="icon-done fa fa-check">
</i>
<div id="SecondItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px">
<label class=" ThemeGrid_Width2" style="" for="" onclick="changeToExperience();">2</label>
</div>
<div id="SecondItemDescription" class="qz-step-desc" style="margin-top: 0px">
</div>
</li>
</span>
<span id="ThirdElement_block">
<li id="ThirdElement" class="active" role="">
<i id="ThirdItemIcon" class="icon-done fa fa-check">
</i>
<div id="ThirdItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px">
<label class=" ThemeGrid_Width2" style="" for="" onclick="changeToPreferences();">3</label>
</div>
<div id="ThirdItemDescription" class="qz-step-desc" style="margin-top: 0px">
</div>
</li>
</span>
<span id="FourthElement_block"><li id="FourthElement" class="next" role="">
<i id="FourthItemIcon" class="icon-done fa fa-check"></i>
<div id="FourthItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px">
<label class=" ThemeGrid_Width2" style="" for="" onclick="changeToPrice();">4</label>
</div>
<div id="FourthItemDescription" class="qz-step-desc" style="margin-top: 0px">
</div>
</li>
</span>
</ul>
CSSはここにある：
qz-step-container {
text-align: center;
position: relative;
width: 100%;
}
qz-step-container qz-steps {
margin: 0;
padding: 0;
}
qz-step-container qz-steps li {
width: calc(16.66666667%);
color: #CDD0DC;
line-height: 50px;
display: inline-block;
font-size: 14px;
position: relative;
height: 50px;
}
qz-step-container qz-steps li .icon-done {
color: #fff;
font-size: 18px;
display: none;
}
qz-step-container qz-steps li:after {
position: absolute;
content: '';
width: 100%;
height: 2px;
background: #fff;
left: 50%;
top: 0;
bottom: 0;
margin: auto 0 auto 0;
z-index: -2;
}
qz-step-container qz-steps li:last-child:after {
content: '';
width: 0;
}
qz-step-container qz-steps li.active {
color: #fee103;
cursor: default;
z-index: 1;
}
qz-step-container qz-steps li.active:before {
border: 2px solid #fee103;
z-index: 1;
}
qz-step-container qz-steps li.next {
color: #fee103;
cursor: default;
z-index: 0;
}
qz-step-container qz-steps li.next:before {
border: 2px solid #E1E1E1;
z-index: 0;
}
qz-step-container qz-steps li.done {
color: #fee103;
cursor: default;
}
qz-step-container qz-steps li.done .icon-done {
display: inherit;
}
qz-step-container qz-steps li.done .qz-step-text {
display: none;
}
qz-step-container qz-steps li.done:before {
background: #fee103;
border: 2px solid #fee103;
}
qz-step-container qz-steps li.done:after {
background: #fee103;
}
qz-step-container qz-steps li.disabled {
cursor: default;
}
qz-step-container qz-steps li.disabled:before {
background: #e2e2e2;
border: 2px solid #e2e2e2;
}
qz-step-container qz-steps li:before {
content: '';
position: absolute;
width: 50px;
height: 50px;
font-size: 16px;
background: #ffffff;
border-radius: 50%;
left: 0;
right: 0;
margin: 0 auto 5px auto;
z-index: -1;
}
qz-step-container qz-steps li:nth-child(10) {
z-index: 10;
}
qz-step-container qz-steps li:nth-child(9) {
z-index: 9;
}
qz-step-container qz-steps li:nth-child(8) {
z-index: 8;
}
qz-step-container qz-steps li:nth-child(7) {
z-index: 7;
}
qz-step-container qz-steps li:nth-child(6) {
z-index: 6;
}
qz-step-container qz-steps li:nth-child(5) {
z-index: 5;
}
qz-step-container qz-steps li:nth-child(4) {
z-index: 4;
}
qz-step-container qz-steps li:nth-child(3) {
z-index: 3;
}
qz-step-container qz-steps li:nth-child(2) {
z-index: 2;
}
qz-step-container qz-steps li:nth-child(1) {
z-index: 1;
}
なぜあなたはそれをとても複雑にしていますか？私はあなたに簡単な解決策を与えることができるようにHTMLを置くことができますか？ –
htmlを提供できますか？ –
あなたは要素を正しく押していないと思います。 Class.push（$（this）.attr（ 'class'））を試してください。 –