Как избежать двойного разделения в цикле?
https://stackoverflow.com/questions/3060492
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Спасибо вам за вашу помощь.
Мой код выглядит следующим образом:
var CatItems = "";
for(var x=0; x < data.PRODUCTS.length; x++) {
if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
CatItems += '<div><a class="large_image" href="#"><img src="'+ data.PRODUCTS[x].product_img +'" alt="' + data.PRODUCTS[x].product_name +'"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name +'</h3>';
if ( data.PRODUCTS[x].product_onsale==1 ) {
CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">£'+ data.PRODUCTS[x].product_retailprice +'</span> <span class="price geo_17_darkbrown">£'+ data.PRODUCTS[x].product_webprice +'</span>';
} else {
CatItems += '<span class="price geo_17_darkbrown">£'+ data.PRODUCTS[x].product_webprice +'</span>';
}
if ( data.PRODUCTS[x].product_COLOURS ) {
CatItems += '<span class="colour">';
for(var y=0; y < data.PRODUCTS[x].product_COLOURS.length; y++) {
CatItems += '<span><a href="'+ data.PRODUCTS[x].product_COLOURS[y].colours_large +'"><img src="'+ data.PRODUCTS[x].product_COLOURS[y].colours_thumb +'" alt="'+ data.PRODUCTS[x].product_COLOURS[y].colour_name +'" /></a></span>';
}
CatItems += '</span>';
}
CatItems += '</div>';
if (x % 3 === 2) CatItems += '</li>';
}
и это порождает это:
<div class="carousel_00 jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
<div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
<ul class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 7890px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress1.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<img class="sale" src="assets/images/sale.gif" alt="sale">
<span class="geo_17_red_linethr">£120
</span>
<span class="price geo_17_darkbrown">£100
</span>
<span class="colour">
<span>
<a href="assets/images/colour.gif">
<img alt="Black" src="assets/images/black.gif"></a>
</span>
<span>
<a href="assets/images/colour.gif">
<img alt="Brown" src="assets/images/brown.gif"></a>
</span>
<span>
<a href="assets/images/colour.gif">
<img alt="Purple" src="assets/images/purple.gif"></a>
</span>
</span>
</div>
<div>
<a href="#" class="large_image">
<img alt="Rachel Dress" src="assets/images/dress2.gif"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress3.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress1.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress2.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress3.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress3.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
<div>
<a href="#" class="large_image">
<img alt="Elena Top" src="assets/images/dress3.gif"></a>
<h3 class="geo_17_darkbrown">Elena Top</h3>
<span class="price geo_17_darkbrown">£120
</span>
</div>
</li>
</ul>
</div>
<div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true">
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false">
</div>
<div class="jcarousel-control geo_10_darkbrown_capital"> 7 products
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="last">7</a>
</div>
</div>
Это работает так, как и должно быть, поместите каждые 3 div в li.но у меня есть еще одна проблема с divide.Он делит "x" внутри цикла.
Например, в JS:
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
И HTML out - это:
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>
then
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>
then
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>
etc...
Что мне нужно, так это то, что счетчик идет как 0-1-2-3-4-5-etc, но при разделении он идет как 0-3-6-etc, а jCarousel вставляет пустые значения li 1-2, 4-5, 7-8.
Как я могу избежать разделения "x" внутри цикла?
Спасибо тебе!
Решение
Просто используйте выражение (x/3) вместо x где вам нужен инкрементный счет
Другие советы
Я не уверен, что я понимаю ваш вопрос, но наличие квадратных кронштейнов вокруг х в этом коде кажется довольно странным для меня:
'<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'
Попробуйте удалить их и посмотреть, что произойдет:
'<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-' + x + ' jcarousel-item-'+ x +'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'
Попробуйте настроить:
y=Math.floor(x/3);
как раз перед созданием <li>, Затем используйте y на месте x Когда строительство <li>.
if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
Значение, вы создаете элемент «Li» только в том случае, если значение «X разделено на 3» равен «0». Очевидно, что вы получите счет 0,36,9 и т. Д. .. Просмотрите свое состояние и внесите изменения соответственно.
if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
Что вы ожидаете? Это добавляется к вашему выходу, только если X - это кратное 3. Измените условие.
И нет, не создавайте другую переменную, но очистите свой код.
создайте другую переменную типа i = x / 3;и использовать это вместо использования i ..?
Редактировать @psmears:
у него есть:
if (x % 3 === 0)
CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
итак, если бы он создал эту переменную внутри области этого если-заявление, все должно быть в порядке
так что должно получиться что-то вроде:
if (x % 3 === 0)
{
var i = x / 3;
CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+i+' jcarousel-item-'+i+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
}
Не связан с StackOverflow
