ループで二重分裂を避ける方法は？
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として行くことですが、Divideとともに0-3-6-ETCとJCAROSEL INSERT BLANK LIの1-2、4-5、7-8が挿入されます。
ループ内で「x」分割を避けることができる方法は？
tnak you！
解決
式を使用するだけです (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' '' '' ''に等しい場合にのみ、「li」要素を作成しています。明らかに、あなたは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の倍数である場合にのみ出力に追加されます。条件を変更します。
いいえ、別の変数を作成しないでください。コードをクリーンアップします。
i = x / 3のような別の変数を作成します。私を使用する代わりにそれを使用します。
@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
