علت دقیق تکرار به صورت تصاعدی و راهکاری بهتر

Question

با سلام
دو تا نکته :
۱. اول ازونجائی که در ساختار کد ما صرفا یک بلوک رو "بدون کمی و کاستی و تغییرات" میخواستیم قبل یا بعد یک عنصر دیگه اضافه یا کم کنیم، برای بهینه تر و کوتاه تر شدن کد بهتر بود از متد clone() استفاده میکردیم. کار این متد یه جورایی همون کپی کردنه خودمونه. که بیایم یک بلوکی رو کپی کنیم و جاهای دیگه به فراخور نیاز ازش استفاده کنیم.

کد jQuery با استفاده از clone :

$(document).ready(function(){
    $('#add-more').click(function(e){
        var inputWrapper = $('.input-wrapper').clone(); //clone
        
        e.preventDefault();
        $(this).before(inputWrapper);
    });
});

دوم:
با استفاده از این روش میشه کار رو انجام داد. اما همانند چیزی که توی جلسه هم دیدیم، به صورت توان هایی از ۲ المان ها افزایش پیدا میکنن با هر بار کلیک، علت این موضوع رو استاد یک اشاره ای کردن اما اگر بخوایم دقیق تر بدونیم، علت اصلی اینه که چه با روش فوق و چه با روشی که استاد گرامی راه حل رو ارائه دادن، کلاس اون بلوکی که داریم اضافش میکنیم تغییری نمیکنه و ثابت میمونه، (اینجا عنصر با کلاس .input-wrapper). به همین خاطر هنگامی که برای اولین بار کلیک میکنه کاربر و ورودی ها به ۲ افزایش پیدا میکنه، ما ۲ تا عنصر با کلاس یکسان داریم،

دفعه ی دیگه که کاربر کلیک میکنه، خط کد دارای کامنت clone، میاد تمام عناصری که اون کلاس رو دارن رو کپی میکنه، یعنی دو تا عنصر، پس دو تا داشتیم دو تا هم با کلیک اضافه میشه میشه ۴ تا. و همینطور تااا توان های دو.

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

راهکار چیه؟ استفاده از selector جی کوئری به صورت :last (یعنی آخرین عنصری که این آیدی/کلاس/نوع رو داره)
.input-wrapper:last یعنی من کاری ندارم چند تا عنصر با همین کلاس وجود داره، بیا آخرین عنصر با این کلاس رو برای من انتخاب کن

بدین صورت مشکل برطرف میشه :

$(document).ready(function(){
    $('#add-more').click(function(e){
        var inputWrapper = $('.input-wrapper:last').clone(); //clone

        e.preventDefault();
        $(this).before(inputWrapper);
    });
});

html :

<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery</title>
    <!-- Font Awesome -->
    <script
      src="https://kit.fontawesome.com/35bf447199.js"
      crossorigin="anonymous"
    ></script>
    <!-- My CSS File -->
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <div class="form-container">
      <form action="">
        <h4>ورود سوابق کاربری</h4>
        <div class="input-wrapper">
          <input
            type="text"
            name="input-text"
            id="input-text"
            placeholder="سابقه ی خود را وارد کنید..."
          />
        </div>
        <a href="" id="add-more"> + افزودن سابقه جدید</a>
        <button class="submit-btn">ثبت سوابق</button>
      </form>
    </div>
    <!-- jQuery CDN 3.6.0 -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- My .js File -->
    <script src="assets/js/main.js"></script>
  </body>
</html>

css :

@import url(cssreset.css);

body{
  background-color: rgb(41,41,41);
}

.form-container{
  background-color: #efefef;
  width: 400px;
  min-height: 100px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
}

.form-container h4{
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding-bottom: 10px;
}

.form-container .input-wrapper{
  margin: 10px 0;
}

.form-container input{
  padding: 5px;
  width: 100%;
  outline: none;
  border-radius: 3px;
  border: 1px solid rgb(3, 129, 179);
  height: 30px;
  font-size: 14px;
}
.form-container input:focus{
  border: 2px solid rgb(1, 76, 105);
}

.form-container button{
  display: block;
  width: 50%;
  padding: 5px 10px;
  background-color: greenyellow;
  border: 1px solid rgb(34, 145, 0);
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
  outline: none;
}

.form-container button:active,
.form-container button:hover{
  background-color: rgb(64, 184, 64);
}

.form-container a{
  margin: 10px;
  display: block;
  font-size: 14px;
}
.form-container a:hover,
.form-container a:active{
  color:rgb(3, 129, 179);
}

طراحی وب

Mahdi Mohaqeq

28 شهریور 00

علت دقیق تکرار به صورت تصاعدی و راهکاری بهتر

سوالات مرتبط