Laravelプロダクトを編集するjquery ui sliderを使用するmodus

Question

私のLaravelアプリケーションでは、jquery UIスライダを含むフォームがあります。

画像：私は基本的にいくつかのデータを入れて、それを保存

。

私は作成した製品を編集する必要があるので、編集モードを作成しました。

私は、2つの名前などの製品を作成したと言いますが、私の編集で正しく表示されます。

名前を追加する場合は、右にスライドして空白のテキストフィールドを追加します。

これまでは機能していましたが、名前を削除して左にスライドしたい場合は、もう動作しません。

私はスライド番号3から少しscretch

2に例えばスライド場合は、最後の名前が削除されなければならない：

slider (3)     slider (2) 
-----------------------  ----------------------- 
name1 ....     name1 ... . 
name2 ....     name2 .... 
name3 ....     (name3 is removed) 

編集手口でjqueryのスライダーコードを（コードが過熱？） ：

$("#sliderNumCh").slider({ 
    range: "min", 
    min: 0, 
    max: 18, 
    step: 1, 
    value: {{ $chCount }}, 
    create : function(e, slider) { 

     $currentSliderCount = $('#number_of_ch').val(); 

     @for ($i = 0; $i < $chCount; $i++) 
      $('#sliderAppendNumCh').append(
       '<div class=\"form-group\" id=\"input-chapter-{{ $i }}\">' 
        +'<div class=\"input-group\">' 
         +{{ $i + 1 }}+' Name: <input id=\"input-chapter-name{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][chapter_name]\" type=\"text\" maxlength=\"42\" value=\"{{ $i < $chCount ? $rChapters[$i]['chapter_name'] : '' }}\">' 
         +'Chapter start: <input id=\"input-chapter-start{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][input_chapter_start]\" type=\"text\" maxlength=\"8\" value=\"{{ $i < $chCount ? $rChapters[$i]['input_chapter_start'] : '' }}\">' 
         +'<div class=\"fileupload fileupload-new\" data-provides=\"fileupload\" style=\"display:inline;\">' 
          +'Chapter end: <input id=\"input-chapter-img{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][chapter_timelapse]\" type=\"text\" maxlength=\"8\" value=\"{{ $i < $chCount ? $rChapters[$i]['chapter_timelapse'] : '' }}\">' 
          +' Chapter Time: <input id=\"input-time-chapter-img{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][chapter_img_time]\" type=\"text\" maxlength=\"8\" value=\"{{ $i < $chCount ? $rChapters[$i]['chapter_img_time'] : '' }}\">' 
          +'<button type=\"button\" id=\"rmv-id{{ $i }}\" class=\"btn btn-danger\">Remove</button>' 
          +'<span class=\"btn btn-primary btn-file\">' 
           +'<img id=\"showImg{{ $i }}\" src=\"{{ $rChapters[$i]->getImageAsBase64() }}\" alt=\"current iamge\" class=\"imgPreviewChapters\">' 
          +'</span>' 
          +'<input id=\"input-chapter-id{{ $i }}\" name=\"chapters[{{ $i }}][chapter_id]\" type=\"hidden\" value=\"{{ $i < $chCount ? $rChapters[$i]['id'] : '' }}\"">' 
         +'</div>' 
        +'</div>' 
       +'</div>' 
      ); 
     @endfor 
    }, 
    change : function(e, slider) { 

     $currentSliderCount = $('#number_of_ch').val(); 

     $("div[id*='input-chapter-']").remove(); 

     $chCountValue = {{ $chCount }}; 

     @for ($i = 0; $i < $chCount; $i++) 
      $('#sliderAppendNumCh').append(
       '<div class=\"form-group\" id=\"input-chapter-{{ $i }}\">' 
        +'<div class=\"input-group\">' 
         +{{ $i + 1 }}+' Chapter name: <input id=\"input-chapter-name{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][chapter_name]\" type=\"text\" maxlength=\"42\" value=\"{{ $i < $chCount ? $rChapters[$i]['chapter_name'] : '' }}\">' 
         +'Chapter start: <input id=\"input-chapter-start{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][input_chapter_start]\" type=\"text\" maxlength=\"8\" value=\"{{ $i < $chCount ? $rChapters[$i]['input_chapter_start'] : '' }}\">' 
         +'<div class=\"fileupload fileupload-new\" data-provides=\"fileupload\" style=\"display:inline;\">' 
          +'Chapter end: <input id=\"input-chapter-img{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][chapter_timelapse]\" type=\"text\" maxlength=\"8\" value=\"{{ $i < $chCount ? $rChapters[$i]['chapter_timelapse'] : '' }}\">' 
          +' Chapter time: <input id=\"input-time-chapter-img{{ $i }}\" class=\"input-chapter\" name=\"chapters[{{ $i }}][chapter_img_time]\" type=\"text\" maxlength=\"8\" value=\"{{ $i < $chCount ? $rChapters[$i]['chapter_img_time'] : '' }}\">' 
          +'<button type=\"button\" id=\"rmv-id{{ $i }}\" class=\"btn btn-danger\">Remove</button>' 
          +'<span class=\"btn btn-primary btn-file\" style=\"margin-bottom:10px;\">' 
           +'<img id=\"showImg{{ $i }}\" src=\"{{ $rChapters[$i]->getImageAsBase64() }}\" class=\"imgPreviewChapters\">' 
          +'</span>' 
          +'<input id=\"input-chapter-id{{ $i }}\" name=\"chapters[{{ $i }}][chapter_id]\" type=\"hidden\" value=\"{{ $i < $chCount ? $rChapters[$i]['id'] : '' }}\"">' 
         +'</div>' 
        +'</div>' 
       +'</div>'); 
     @endfor 
     for(var i = {{ $chCount }}; i < $currentSliderCount; i++) { 
      $('#sliderAppendNumCh').append(
      '<div class=\"form-group\" id=\"input-chapter-'+i+'\">' 
       +'<div class=\"input-group\">' 
        +(i+1)+' Chapter name: <input id=\"input-chapter-name'+i+'\" class=\"input-chapter\" name=\"chapters['+i+'][chapter_name]\" type=\"text\">' 
        +'Chapter start: <input id=\"input-chapter-start'+i+'\" class=\"input-chapter\" name=\"chapters['+i+'][input_chapter_start]\" type=\"text\">' 
        +'Chapter end: <input id=\"input-chapter-img'+i+'\" class=\"input-chapter\" name=\"chapters['+i+'][chapter_timelapse]\" type=\"text\">' 
        +' Chapter time: <input id=\"input-time-chapter-img'+i+'\" class=\"input-chapter\" name=\"chapters['+i+'][chapter_img_time]\" type=\"text\" maxlength=\"8\">' 
        +'<input id=\"input-chapter-id'+i+'\" name=\"chapters['+i+'][chapter_id]\" type=\"hidden\" value=\"0\"">' 
       +'</div>' 
      +'</div>'); 
     } 
    }, 
    slide : function(e , slider){ 
     $('#number_of_ch').val(slider.value); 
    }, 
}); 

Answer 1

私はjsファイルを使用して答えを見つけました：

  for(var i = 0; i < $romChapterCountValue; i++) { 
       if($currentSliderCount == i) { 
        for(var u = i; u <= 18; u++){ 
         $('#input-chapter-'+u).remove(); 
        } 
       } 
      } 

左にスライドすると、「ちょうど」はすべてiの上のすべての値を削除します。

これはうまくいきますが、それが最善のアプローチかどうかはわかりません。