ورود عضویت

آرمین امیری نسب

5 سال پیش توسط آرمین امیری نسب مطرح شد

5 پاسخ

Function ها در جاوا اسکریپت

حدود 40 div دارم و قراره که زمانی که روی هر کدوم کلیک شد یک prompt باز بشه و بعد ورودی در متن div قرار بگیره

حالا من که نباید 40 function تعریف کنم چاره کار چیه

@ali.bayat
@hesammousavi
@hossein.r.1442

ثبت پرسش جدید

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 5 سال پیش مطرح شد

بفرمایید، برای ده تا div نوشتم براتون، برای 40 تاش هم فرق خاصی نداره با این، با یک حلقه پیاده سازی میشه:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                direction: rtl;
            }
            .content {
                display: flex;
                flex-direction: column;
            }

            .content__1,
            .content__2,
            .content__3 {
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
            .content__1 {
                background-color: rgb(118, 218, 118);
            }
            .content__2 {
                background-color: rgb(149, 149, 247);
            }
            .content__3 {
                background-color: rgb(247, 195, 100);
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content__1 prompt-text">1</div>
            <div class="content__2 prompt-text">2</div>
            <div class="content__3 prompt-text">3</div>
            <div class="content__1 prompt-text">4</div>
            <div class="content__2 prompt-text">5</div>
            <div class="content__3 prompt-text">6</div>
            <div class="content__1 prompt-text">7</div>
            <div class="content__2 prompt-text">8</div>
            <div class="content__3 prompt-text">9</div>
            <div class="content__1 prompt-text">10</div>
        </div>

        <script>
            let divs = document.querySelectorAll('.prompt-text');

            for(let i = 0; i < divs.length; i++) {
                divs[i].addEventListener('click', e => {
                    let x = prompt('ی چیزی برام بنویس');
                    divs[i].textContent = x;
                });
            }
        </script>
    </body>
</html>

ارسال پاسخ

سید حسین رضوی

تخصص : برنامه نویس وب و طراح رابط کار...

@hossein.r.1442 5 سال پیش مطرح شد

برای همشون یه کلاس قرار بده و بعد یه تابع بنویس و به وسیله this مقدار دهی کن ورودی ها رو

ارسال پاسخ

آرمین امیری نسب

تخصص : برنامه نویس فرانت اند

@arminamirinasab 5 سال پیش مطرح شد

تقریبا متوجه شدم ولی اگه میشه کد بزارید
@hossein.r.1442

ارسال پاسخ

سید حسین رضوی

تخصص : برنامه نویس وب و طراح رابط کار...

@hossein.r.1442 5 سال پیش آپدیت شد

یه چیزی مثل این تقریبا

<div class="test">Text 1</div>
<div class="test">Text 2</div>

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

$(document).ready(function (){
  $('.test').click(function(){
    alert($(this).html());
  });
});

ارسال پاسخ

آرمین امیری نسب

تخصص : برنامه نویس فرانت اند

@arminamirinasab 5 سال پیش مطرح شد

این که Jquery
@hossein.r.1442

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 5 سال پیش مطرح شد

بفرمایید، برای ده تا div نوشتم براتون، برای 40 تاش هم فرق خاصی نداره با این، با یک حلقه پیاده سازی میشه:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                direction: rtl;
            }
            .content {
                display: flex;
                flex-direction: column;
            }

            .content__1,
            .content__2,
            .content__3 {
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
            .content__1 {
                background-color: rgb(118, 218, 118);
            }
            .content__2 {
                background-color: rgb(149, 149, 247);
            }
            .content__3 {
                background-color: rgb(247, 195, 100);
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content__1 prompt-text">1</div>
            <div class="content__2 prompt-text">2</div>
            <div class="content__3 prompt-text">3</div>
            <div class="content__1 prompt-text">4</div>
            <div class="content__2 prompt-text">5</div>
            <div class="content__3 prompt-text">6</div>
            <div class="content__1 prompt-text">7</div>
            <div class="content__2 prompt-text">8</div>
            <div class="content__3 prompt-text">9</div>
            <div class="content__1 prompt-text">10</div>
        </div>

        <script>
            let divs = document.querySelectorAll('.prompt-text');

            for(let i = 0; i < divs.length; i++) {
                divs[i].addEventListener('click', e => {
                    let x = prompt('ی چیزی برام بنویس');
                    divs[i].textContent = x;
                });
            }
        </script>
    </body>
</html>

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

Function ها در جاوا اسکریپت

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

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