2016-08-09 2 views
0

У меня есть вопрос о jquery. Я создал массив, содержащий имена текущих элементов класса «li». Я хотел бы нажать на другой элемент, чтобы удалить класс «active» из предыдущего элемента и присвоить ему класс, содержащийся в массиве. Вот мой кусок кода, ответственный за это действие:Как получить область элементов в массиве - 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]); 
} 
}); 

Классы элементов [0] и т. Д. Не определены. Как я могу использовать имя класса по классам [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; 
 
}

+0

Почему вы делаете это настолько сложным? Можете ли вы поместить html, чтобы я мог дать вам более простое решение. –

+0

Можете ли вы предоставить html? –

+1

Я предполагаю, что вы не нажимаете элементы правильно. Попробуйте class.push ($ (this) .attr ('class')) –

ответ

0

Вы можете сделать это

var lis = $("#ListOfCircles li"); 
lis.on("click",function(){ 
    lis.removeClass("active"); 
    $(this).addClass("active"); 
}) 

Надеюсь, это то, что вам нужно.

+0

Хорошо, Thats работает, как раньше. Может быть, у меня проблема с css (а не с моим css). Не могли бы вы взглянуть на это? Я добавляю класс actitve в «следующий» класс, но его не видно в браузере. Я добавлю свой css в эту ветку. – k1dl3r

Смежные вопросы