12 پاسخ

ارسال پارامتر به جاوا اسکریپت

سلام.
دوستان من یه 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 رو بگیر و نمایش بده.
ممنونم از مهندسان عزیز


ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
0

اگر میفرمایید که الباقی چیزها درست کار میکنند و فقط مشکلش اینه که برای المنت اول فعال میشه همون طوری که دوستان هم اشاره کردن یک راه حل ساده و مشخصش همینه که بجای ID که نمیتونه تکرار بشه از Class استفاده کنید. و بعد وصلش کنید به یک حلقه .each() همون JQuery و مقدار دقیقه رو از اون المنت بخونید و الباقی داستان...

توضیحات بیشتر و مستندات رسمیش رو از اینجا بخونید:
https://api.jquery.com/each/

تو مثال شما هم میشه یک همچین چیزی:

$(".set-time").each((index, element) => {

    var minutes = element.val();

    // Other Stuff....

});

فرهاد
تخصص : Javascript Developer
@cfarhad 4 سال پیش مطرح شد
0

@rohi1386
سلام ، ببینید الان محصولات شما پارامتر هاش یکیه مثل id
شما باید کاری کنید که زمانی که محصولات پیمایش میشن اونایی که تخفیف دارن یه کلاس Discount هم بگیرن

اینجوری شناساییشون میتونید بکنید


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

این کد جاوا اسکریپتم . ولی خب چون اول آی دی set-time برای همه ی محصولاتم یکسانه در نتیجه نشون نمیده.

نکته اول) به جای شناسه (id) از کلاس (class) استفاده کنید. چون شناسه ها باید یکتا باشند.

کاری که من باید کنم اینه که مثلا کنار اون set-time یک آی دی محصولم بزنم که یونیک بشه و کار کنه. ولی نمیدونم تو کد بالا چجوری باید هندلش کنم.

نکته دوم) اگر شما به شناسه محصول دسترسی دارید، خود شناسه محصول به تنهایی انتخاب منحصربفرد رو ایجاد می کنه، دیگه اصلا نیاز به مورد بالا هم نداره. از طریق شناسه محصول، اون رو انتخاب کنید. مثال:

$('[data-id="122"]').val("50")

روح اله ابراهیم زاده
تخصص : PHP.LARAVEL
@rohi1386 4 سال پیش مطرح شد
0

خخب مشکل همینه . فکر میکنم باید به forech یا همچین چیزی تو کدجاوااسکرسپت قرار بدم. چون اون مثلا 122 هر بار عوض میشه و 123 و 124 و ... و به ازای هرکدوم باید این کد جاوا تکرار بشه


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

راه حل ساده ای داره، کافیه به روش زیر متغیر رو وارد انتخابگر جی کوئری تون کنید:

$(`[data-id="${counter}"]`).val("50")

که بهش میگن رشته های الگو یا Template literals or Template strings.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templateliterals


روح اله ابراهیم زاده
تخصص : PHP.LARAVEL
@rohi1386 4 سال پیش مطرح شد
0

@milad
میشه یه توضیحی بدی که این counter چیکار میکنه؟ آخه من کانتر منظم ندارم هااا . ممکنه یه محصول 25 باشه و محصول بعدی مثلا 40 آی دیشون


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

شما که اولش گفتید یک شمارنده باشه 122، 123، 124. کلا برای تغییرات هستش.

حالا اگرم شماره های شما به ترتیب نیستش که بازم مشکلی نداره، بهرحال یک آرایه دارید حتما که شماره ها داخل اون هستش، درسته؟ همون مقدار رو میذاری جای بخشی که در حال تغییر هستش.
الان من یک انتخابگری برای شما نوشتم که براساس data-id داره عمل می کنه و مقادیر پویایی رو بهش نسبت میده.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

بازم اگه گویا نیست صحبت من، شما کدهای html رو کامل تر بزار اینجا، فقط یک مورد نباشه، 5 تا باشه.
حلقه ای که نوشتی رو هم کامل بزار.
شماره های محصولات رو هم چجوری دریافت میشه؟ اون رو هم بزار.
بعدش من تنظیمش می کنم.


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
1

سلام من منظور شما رو سعی کردم بفهمم اما همه رو درست متوجه نشدم و گرنه احتمالا مشکل شما یه راحل ساده داره


روح اله ابراهیم زاده
تخصص : PHP.LARAVEL
@rohi1386 4 سال پیش آپدیت شد
0

@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>

فکر میکنم این کد جاوااسکریپت باید تکرار شه و هربار یه آیدی جدید تولید شه و به اینپوته هم بده هم . یه همچین چیزی


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
0

سلام دوست من . ببینید اگر میخواین برا اساس یه تایمی یه شمارنده در سایت کارکنه و فعال باشه مثل سایت دیجی کالا که برای بخش محصولات شگفت انگیزش ازش استفاده میکنه یه کتابخونه هست به نام Flipclok که کارو راحت میکنه و نیازی به کار زیاد از طرف کاربر نیست خودم چند بار ازش استفاده کردم.
در این آدرس


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
0

اگر میفرمایید که الباقی چیزها درست کار میکنند و فقط مشکلش اینه که برای المنت اول فعال میشه همون طوری که دوستان هم اشاره کردن یک راه حل ساده و مشخصش همینه که بجای ID که نمیتونه تکرار بشه از Class استفاده کنید. و بعد وصلش کنید به یک حلقه .each() همون JQuery و مقدار دقیقه رو از اون المنت بخونید و الباقی داستان...

توضیحات بیشتر و مستندات رسمیش رو از اینجا بخونید:
https://api.jquery.com/each/

تو مثال شما هم میشه یک همچین چیزی:

$(".set-time").each((index, element) => {

    var minutes = element.val();

    // Other Stuff....

});

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

گویا شما درک درستی از جاوااسکریپت ندارید، اینجوری کد نوشتن نمیشه عزیزجان


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام