سلام.
دوستان من یه foreach دارم که محصولاتم رو به نمایش میزاره
حالا میخوام هر محصولی رو که مثلا تخفیف ویژه گزاشتم یه کانتر بیاد روبه روش قرار بگیره و شمارنده تاریخ بده
تا اینجاش حله و درست کار میکنه
اما فقط برا اولین محصولم :
var minutes = $("#set-time").val();
اینم کد html:
<td>
<input data-id="{{$product->id}}" type="hidden" id="set-time" value="{{$minutes}}" />
<div id="countdown">
<div id='tiles' class="color-full"></div>
</div>
</td>
این کد جاوا اسکریپتم . ولی خب چون اول آی دی set-time برای همه ی محصولاتم یکسانه در نتیجه نشون نمیده.
کاری که من باید کنم اینه که مثلا کنار اون set-time یک آی دی محصولم بزنم که یونیک بشه و کار کنه . ولی نمیدونم تو کد بالا چجوری باید هندلش کنم.
یعنی تو این خط بالا چجوری بگم که اونی که آیدیش مثلا set-time1 یا set-time2 و... هست و val رو بگیر و نمایش بده.
ممنونم از مهندسان عزیز
اگر میفرمایید که الباقی چیزها درست کار میکنند و فقط مشکلش اینه که برای المنت اول فعال میشه همون طوری که دوستان هم اشاره کردن یک راه حل ساده و مشخصش همینه که بجای ID که نمیتونه تکرار بشه از Class استفاده کنید. و بعد وصلش کنید به یک حلقه .each() همون JQuery و مقدار دقیقه رو از اون المنت بخونید و الباقی داستان...
توضیحات بیشتر و مستندات رسمیش رو از اینجا بخونید:
https://api.jquery.com/each/
تو مثال شما هم میشه یک همچین چیزی:
$(".set-time").each((index, element) => {
var minutes = element.val();
// Other Stuff....
});
@rohi1386
سلام ، ببینید الان محصولات شما پارامتر هاش یکیه مثل id
شما باید کاری کنید که زمانی که محصولات پیمایش میشن اونایی که تخفیف دارن یه کلاس Discount هم بگیرن
اینجوری شناساییشون میتونید بکنید
این کد جاوا اسکریپتم . ولی خب چون اول آی دی set-time برای همه ی محصولاتم یکسانه در نتیجه نشون نمیده.
نکته اول) به جای شناسه (id) از کلاس (class) استفاده کنید. چون شناسه ها باید یکتا باشند.
کاری که من باید کنم اینه که مثلا کنار اون set-time یک آی دی محصولم بزنم که یونیک بشه و کار کنه. ولی نمیدونم تو کد بالا چجوری باید هندلش کنم.
نکته دوم) اگر شما به شناسه محصول دسترسی دارید، خود شناسه محصول به تنهایی انتخاب منحصربفرد رو ایجاد می کنه، دیگه اصلا نیاز به مورد بالا هم نداره. از طریق شناسه محصول، اون رو انتخاب کنید. مثال:
$('[data-id="122"]').val("50")
خخب مشکل همینه . فکر میکنم باید به forech یا همچین چیزی تو کدجاوااسکرسپت قرار بدم. چون اون مثلا 122 هر بار عوض میشه و 123 و 124 و ... و به ازای هرکدوم باید این کد جاوا تکرار بشه
راه حل ساده ای داره، کافیه به روش زیر متغیر رو وارد انتخابگر جی کوئری تون کنید:
$(`[data-id="${counter}"]`).val("50")
که بهش میگن رشته های الگو یا Template literals or Template strings.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templateliterals
@milad
میشه یه توضیحی بدی که این counter چیکار میکنه؟ آخه من کانتر منظم ندارم هااا . ممکنه یه محصول 25 باشه و محصول بعدی مثلا 40 آی دیشون
شما که اولش گفتید یک شمارنده باشه 122، 123، 124. کلا برای تغییرات هستش.
حالا اگرم شماره های شما به ترتیب نیستش که بازم مشکلی نداره، بهرحال یک آرایه دارید حتما که شماره ها داخل اون هستش، درسته؟ همون مقدار رو میذاری جای بخشی که در حال تغییر هستش.
الان من یک انتخابگری برای شما نوشتم که براساس data-id داره عمل می کنه و مقادیر پویایی رو بهش نسبت میده.
بازم اگه گویا نیست صحبت من، شما کدهای html رو کامل تر بزار اینجا، فقط یک مورد نباشه، 5 تا باشه.
حلقه ای که نوشتی رو هم کامل بزار.
شماره های محصولات رو هم چجوری دریافت میشه؟ اون رو هم بزار.
بعدش من تنظیمش می کنم.
سلام من منظور شما رو سعی کردم بفهمم اما همه رو درست متوجه نشدم و گرنه احتمالا مشکل شما یه راحل ساده داره
@milad @hosseinshirinegad98
دوستان عزیزم
ببینید من یه لیست محصولات دارم با فورایچ لاراول
اون شمارنده آخرو ببینید . میخوام برا همه فعال بشه.
این کد تو forech
<td>
<input class="set-time" data-id="{{$product->id}}" type="hidden" id="set-time" value="{{$minutes}}" />
<div id="countdown">
<div id='tiles' class="color-full"></div>
</div>
</td>
اینم جاوا اسکریپت:
<script>
$(document).ready(function() {
var minutes = $("#set-time").val();
var target_date = new Date().getTime() + minutes * 60 * 1000; // set the countdown date
var time_limit = minutes * 60 * 1000;
//set actual timer
setTimeout(function () {
console.log("done");
}, time_limit);
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
getCountdown();
setInterval(function () {
getCountdown();
}, 1000);
function getCountdown() {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
if (seconds_left >= 0) {
console.log(time_limit);
if (seconds_left * 1000 < time_limit / 2) {
$("#tiles").removeClass("color-full");
$("#tiles").addClass("color-half");
}
if (seconds_left * 1000 < time_limit / 4) {
$("#tiles").removeClass("color-half");
$("#tiles").addClass("color-empty");
}
days = pad(parseInt(seconds_left / 86400));
seconds_left = seconds_left % 86400;
hours = pad(parseInt(seconds_left / 3600));
seconds_left = seconds_left % 3600;
minutes = pad(parseInt(seconds_left / 60));
seconds = pad(parseInt(seconds_left % 60));
// format countdown string + set tag value
countdown.innerHTML =
"<span>" +
hours +
":</span><span>" +
minutes +
":</span><span>" +
seconds +
"</span>";
}
}
function pad(n) {
return (n < 10 ? "0" : "") + n;
}
});
</script>
فکر میکنم این کد جاوااسکریپت باید تکرار شه و هربار یه آیدی جدید تولید شه و به اینپوته هم بده هم . یه همچین چیزی
سلام دوست من . ببینید اگر میخواین برا اساس یه تایمی یه شمارنده در سایت کارکنه و فعال باشه مثل سایت دیجی کالا که برای بخش محصولات شگفت انگیزش ازش استفاده میکنه یه کتابخونه هست به نام Flipclok که کارو راحت میکنه و نیازی به کار زیاد از طرف کاربر نیست خودم چند بار ازش استفاده کردم.
در این آدرس
اگر میفرمایید که الباقی چیزها درست کار میکنند و فقط مشکلش اینه که برای المنت اول فعال میشه همون طوری که دوستان هم اشاره کردن یک راه حل ساده و مشخصش همینه که بجای ID که نمیتونه تکرار بشه از Class استفاده کنید. و بعد وصلش کنید به یک حلقه .each() همون JQuery و مقدار دقیقه رو از اون المنت بخونید و الباقی داستان...
توضیحات بیشتر و مستندات رسمیش رو از اینجا بخونید:
https://api.jquery.com/each/
تو مثال شما هم میشه یک همچین چیزی:
$(".set-time").each((index, element) => {
var minutes = element.val();
// Other Stuff....
});
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟