bugfix> javascript > 投稿

私はjsの初心者のようなものですが、誰かがこのコードを見て、それが正しいかどうか、改善できるかどうか、そしてどのように改善できるかを教えてもらえますか?意図したとおりに動作していますが、正直なところ、うまく書かれているかどうかはわかりません。前もって感謝します (:

          <script>
               $(document).ready(function() {
                   $("button").click(function(event) {
                       var a = (event.target).classList.item(0);
                       var b =  ".carousel" + "." + a ;
                       $(b).myfunction;
                   });
               });
           </script>

そのスクリプトの理由は、カスタムポップアップモーダル内のスライダー( "JQuery lightSlider")内にカルーセル(Bootsrap)があり、カルーセルが表示される場合にのみimgsカルーセルをページ開始時にロードしたくないためです。

スクリプトは、クリックされたボタン要素( "custom-n")のクラス名を「格納」し、変数bに格納される.carousel.custom-xを記述して、変数bをセレクターとして使用します。 data-srcをsrcに置き換えるcustom-nカルーセルの関数を呼び出します。

これが混乱しないことを願っています笑

これはhtmlの簡略化であり、モーダルは <button> クリックされます。 これらは、メインスライダー(ライトスライダー)の一種の「サムネイル」であるため、次のようになります。 <button class="custom-1"> モーダルを開き、「ライトスライダー」をスライドn1に設定します <button class="custom-2"> モーダルを開き、「ライトスライダー」をスライドn2に設定します 等々。

ライトスライダーのスライド内のカルーセルはすべて、imgにdata-srcがあり、アイデアは、data-srcをカスタムに「関連する」カルーセルのsrcに置き換えることです。


   <div class="light-slider-buttons">
       <button class="custom-1 myclass"></button>
       <button class="custom-2 myclass"></button>
       <button class="custom-3 myclass"></button>
   </div>
   
   <div class="modal-wrp">
      <div class="modal-inner">
        <ul id="light-slider">
          <li>
            <div class="slide-wrapper">
                      
              <div class="carousel custom-1">                                                    
                <div class="carousel-inner">
                  <div class="carousel-item active">
                  <img data-src="...">
                  </div>
                  <div class="carousel-item">
                  <img data-src="...">
                  </div>
                    <div class="carousel-item">
                  <img data-src="...">
                  </div>
                </div>                           
              </div>
                       
            </div>
          </li>
               
        </ul>
      </div>
   </div>

回答 1 件
  • コードはよさそうだ。

    2つの提案があります。

    まず第一に、使用しているようです class データを保存する属性( custom-1 、など)

    に設定してみませんか data-item-class 代わりに属性(で始まる任意の名前 data- しましょう)?

      <div class="light-slider-buttons">
           <button class="myclass" data-item-class="custom-1"></button>
           <button class="myclass" data-item-class="custom-2"></button>
           <button class="myclass" data-item-class="custom-3"></button>
       </div>
    
    

    値は次のように読み取ることができます event.target.dataset.itemClass (( item-class になります itemClass 、詳細についてはドキュメントを参照してください)。

    変数のコード a に置き換えられます:

    var a = event.target.dataset.itemClass;
    
    

    第二に、設定 click のイベントハンドラ 'button' セレクターが広すぎます。

    新品の場合はエラーが発生します button 将来、別の目的を持つ要素がページに追加されます。

    考える方がはるかに安全です <div class="light-slider-buttons"> あなたを包むコンポーネントとして button 要素を適用し、 click それらにのみハンドラー。

    $(".light-slider-buttons button").click(function(event) {
    ...
    }
    
    

    あまり変化しませんが、外部に他のボタンを追加すると重要です <div class="light-slider-buttons"> 彼らは得られません click イベントハンドラ。

    jQueryはCSSセレクター構文を使用します。詳細については、ドキュメントをご覧ください。

    の推奨コードは次のとおりです script 鬼ごっこ

              <script>
                   $(document).ready(function() {
                       $(".light-slider-buttons button").click(function(event) {
                           var a = event.target.dataset.itemClass;
                           var b =  ".carousel" + "." + a ;
                           $(b).myfunction;
                       });
                   });
               </script>
    
    

    P.S.jQueryプログラミングスタイルは非常に重要です(すべてのイベントでページを更新する方法を指定します)。

    UIを構築する方法は他にもあります。たとえば、Reactプログラミングでは宣言型です(指定された入力/状態に基づいてUIがどのように見えるかを指定します)

あなたの答え