如何避免在循环双鸿沟？
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的锂。但我有一个鸿沟了另一个问题。其划分“×”环路内。
例如在JS：
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
和HTML的是：
<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，等等，但把它变为0-3-6，等和的jCarousel插入坯体里的1-2，4-5， 7-8。
如何避免“×”环路内分？
Tnak你！
解决方案
只需使用表达(x/3)代替x在需要的增量计数
其他提示
我不知道我理解你的问题，但有在该代码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">';
含义，要创建仅当“的值X除以3”的“礼”元素等于“0”。很明显，你会得到数为0,3,6,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.更改条件的倍数。
不，不创建另一个变量，但清理你的代码。
创建像我另一个变量= 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
