كيف تتجنب الفجوة المزدوجة في حلقة؟
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 ديف في لي. لكن لدي مشكلة أخرى مع الفجوة. تقسم "X" داخل الحلقة.
على سبيل المثال في 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-5-ETC ، ولكن مع الانقسام ، يذهب 0-3-6-ETC و jCarousel إدراج فارغ LI 1-2 ، 4-5 ، 7-8 .
كيف يمكنني تجنب "X" قسمة داخل الحلقة؟
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">';
بمعنى أنك تقوم بإنشاء عنصر "li" فقط إذا كانت قيمة "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. قم بتغيير الحالة.
ولا ، لا تنشئ متغيرًا آخر ولكن تنظيف الكود الخاص بك.
إنشاء متغير آخر مثل i = x / 3 ؛ واستخدم ذلك بدلاً من استخدام أنا ..؟
تحرير ppsmears:
هو عنده:
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
