آموزش JQuery (قسمت ۵)

آموزش-jquery-قسمت-۵

سلام به دوستان دکتر کدی.همانطور که در بخش قبلی آموزش JQuery‌ از کد append استفاده کردیم، قرار بود در بخش بعدی آموزش، این کد رو بهتون آموزش بدم تا با کاربرد این کد آشنا بشید.

کاربر append معمولا در جاهایی که نیاز به افزودن یک شِی جدید مثل افزودن یک گزینه جدید به لیست یا افزودن دکمه جدید و ... مورد استفاده قرار می گیره.با مشاهده کدهای زیر بهتر متوجه کاربرد append خواهید شد.

کدهای HTML :

<h6>► با وارد کردن عنوان دکمه و کلیک روی دکمه افزودن، یک دکمه جدید ایجاد خواهید کرد</h6>
<br>
<input type="text" placeholder="عنوان دکمه جدید" id="dr-button-title">
<button id="dr-add-button"> افزودن دکمه جدید + </button>
<button id="dr-empty-button"> حذف دکمه ها - </button>
<br><br>
<div id="dr-button-box"></div> <!-- محل ایجاد دکمه های جدید توسط  #dr-button-box -->

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function() { //-> ساختار اصلی JQuery
        $('#dr-add-button').on('click', function() { //-> تعریف رویداد کلیک برای دکمه
            var dr_button_title = $('#dr-button-title').val(); //-> گرفتن عنوان دکمه 
            if (dr_button_title == '') { //-> دستور شرطی برای خالی بودن عنوان دکمه
                alert('لطفا یک عنوان برای دکمه وارد کنید.'); 
                 //-> نمایش اخطار خالی بودن عنوان دکمه
            } else {
                $('#dr-button-box').append(
                    '<button id="dr-add-button">' + dr_button_title + '</button> <br><br>' //-> وارد کردن کدهایی که باید ایجاد شوند
                );
                $('#dr-button-title').val(''); //-> خالی کردن عنوان نوشته شده پس از ایجاد دکمه
            }
        });

        $('#dr-empty-button').on('click', function(){
              $('#dr-button-box').empty(); //-> برای حذف دکمه های ایجاد شده
        });
    });
</script>

در کدهای بالا ما توسط Html یک Button و Textbox قرار دادیم و با استفاده از JQuery کدهایی نوشتیم که با وارد کردن عنوان دکمه و کلیک روی دکمه افزودن، یک دکمه جدید با عنوان وارد شده ایجاد خواهد شد. در کدهای JQuery و داخل کد append، می توانید دستورات یا کدهای مورد نظر خود را نوشته و توسط append آن را ایجاد کنید و اگر نیاز به حذف دکمه های ایجاد شده بود می توانید از کد ()empty استفاده کنید.

دستور استفاده if در کدهای JQuery جهت ایجاد شرط می باشد که ما برای چک کردن خالی بودن عنوان استفاده کردیم.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟