fara
2 سال پیش توسط fara مطرح شد
3 پاسخ

كمك در رابطه با كد جاوا اسكريپت

سلام. در رابطه با كد جاوا اسكريپت يه كمك ميخاستم. يسري محصول با اسم و قيمت گذاشتم و ميخاستم ايونت onclick بزارم تا وقتي روشون كليك ميشه پايين صفحه توي يه جدول شبيه فاكتور اسم و قيمت هرمحصولي كه روش كليك شده نوشته بشه.كد جاوا اسكريپت چجوري بزنم كه بفهمه بايد اسم و قيمت همون محصولي كه كليك شده روش نوشته بشه و براي هر محصول فانكشن جدا ننويسم.

كد html:

<div class="row3">
    <div class="favproduct">
    <img class="favproductimg" src="products/oceancandles.jpg"></br>
    <p class="favproductname"><strong>The ocean candle</strong></p></br>
    <p style="font-size:13px; text-align:center;"><em>Price: 40,000 T</em></p>
    </div>

    <div class="favproduct">
    <img class="favproductimg" src="products/orangeandcinnamoncandles.jpg"></br>
    <p class="favproductname"><strong>The orange and cinnamon candle</strong></p></br>
    <p style="font-size:13px; text-align:center;"><em>Price: 95,000 T</em></p>
    </div>

    <div class="favproduct">
    <img class="favproductimg" src="products/rainbowcandles.jpg"></br>
    <p class="favproductname"><strong>The rainbow candle</strong></p></br>
    <p style="font-size:13px; text-align:center;"><em>Price: 50,000 T</em></p>
    </div>

    <div class="favproduct">
    <img class="favproductimg" src="products/transparentjellycandles.jpg"></br>
    <p class="favproductname"><strong>The transparent jelly candle</strong></p></br>
    <p style="font-size:13px; text-align:center;"><em>Price: 69,000 T</em></p>
    </div>

كد css:

.favproduct{
        display:inline;
        overflow:auto;
        border:0px solid black;
        margin-left:42px;
        margin-right:42px;
        margin-top:25px;
        margin-bottom:25px;
        width:220px;
        height:300px;
        float:left;
        border-radius:15px;
        box-shadow:1px 1px 1px 1px grey;
        background-image:linear-gradient(to bottom , #f3f2f1 , #c1afa4 );
        cursor:pointer;
}
.favproduct:hover{
        background-image:none;
        background-color:#c1afa4;
}
.favproductimg{
        width:138px;
        height:138px;
        border-radius:8px;
        display: block;
        margin-top:12px;
        margin-left: auto;
        margin-right: auto;
}
.favproductname{
        font-size:14px;
        text-align:center;
}

ثبت پرسش جدید
woz
تخصص : fan of open source world
@wozniak 2 سال پیش آپدیت شد
0

میتونید از data attribue ها استفاده کنید :
مثلا در html خود برای هر محصول data-id , data-name , data-price بگذارید


    <div class="favproduct">
    <img class="favproductimg" src="products/oceancandles.jpg"></br>
    <p class="favproductname" data-name="The ocean candle"><strong>The ocean candle</strong></p></br>
    <p class="favproductprice" data-price="40,000 " style="font-size:13px; text-align:center;"><em>Price: 40,000 T</em></p>
    </div>

حالا میتونید داخل جاوا اسکریپت خودتون از این اطلاعات به صورت زیر استفاده کنید :


    $(".favproduct").click(function (){
        let name = $(this).find(".favproductname").data('name')
        let price = $(this).find(".favproductprice").data('price')

            .......
    })

محمد زورمند
تخصص : react developer
@SpyStar0003 2 سال پیش مطرح شد
0

سلام

روش بالا که دوستمون گفتن خوبه!

شما حتی میتونی بگی وقتی روش کلیک شد با innerHTML یا همچین چیزی مقادیر رو بگیره و بریزه داخل یه متغیر ! حالا این متغیر میتونه یه کلاس باشه یا یه مقدار ساده ! بعد اون جدول مانند پایین رو DISPLAY رو تغییر بده و مقادیر مرحله قبل بشه مقادیر اون !

حتی میتونین مقادیر رو بریزین داخل یک آرایه بصورت آبجکت بعد رو اون آرایه یه MAP بزنین و با استفاده insertAdjacentHTML() یا یک دام مجازی یعنی همون shadow dom مقادیر رو نشون بدین !

کلا روش های زیادی هست ببینین کدومو دوس دارین


fara
تخصص : دانشجو
@fjvrse 2 سال پیش مطرح شد
0

میشه کدش رو بنویسین چون MAP اینارو بلد نیستم بزنم


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

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