スライドのナビゲーション数値が取得できません。

Question

##前提・実現したいこと
メインビジュアルとして設定しているスライドにナビゲーションを設置したい
##発生している問題
クリックしたドット(sldNavDot)に付与しているDataの数値を取得できません。
##該当のソースコード

 <section class="mainvisual">
        <div class="mainvisual__container">
            <div id="sldWrapper" class="mainvisual__wrapper">
                <div id="sld1" class="mainvisual__item sldFade">
                    <img src="./img/mv.jpg" alt="">
                    <p class="sldText">
                        くつろぎの環境で行う<br>
                        からだに優しい<br>
                        内視鏡検査
                    </p>
                </div>
                <div id="sld2" class="mainvisual__item sldFade">
                    <img src="./img/mv2.jpg" alt="">
                    <p class="sldText">
                        胃腸と消化器全般の<br>
                        専門医として
                    </p>
                </div>
                <div id="sld3" class="mainvisual__item sldFade">
                    <img src="./img/mv3.jpg" alt="">
                    <p class="sldText">
                        地元の皆さまの<br>
                        かかりつけ医として
                    </p>
                </div>
                <div id="sldNav">
                 </div>
            </div>
            <div class="mainvisual__info__wrapper">
                <div class="mainvisual__info">
                    <p class="mainvisual__info__title">お知らせ</p>
                    <div class="mainvisual__info__text">
                        <p>2020.03.30</p>
                        <a href="#">発熱・呼吸器症状のある患者様へ</a>
                    </div>
                </div>
               
        </div>
       
    </section>

//mainvisual画像切り替え
  var sldWrap = $('#sldWrapper'),
    sld = '.sldFade',
    sldPre = 'sld',
    sldNavDot = '.sldNavDot',
    sldNav = '#sldNav',
    sldNavPre = 'sldNav',
    sldTime = 2000,
    sldWait = 5000,
    delayTime = 1000,
    sldTimer;


  $.fn.slideFade = function () {
    return this.each(function (i, elem) {
      clearTimeout(sldTimer);
      var sldNum = parseInt(sldWrap.data('sldNum'));
      $(sld + '.current').stop().animate();
      $(sld).not(`#${sldPre}${sldNum}`).fadeOut(sldTime).removeClass('current');
      $(`#${sldPre}${sldNum} .sldText`).hide();
      $(`#${sldPre}${sldNum} >img`).removeClass('zoomImg');
      $(`#${sldPre}${sldNum}`).fadeIn(sldTime).addClass('current');
      $(`#${sldPre}${sldNum} >img`).addClass('zoomImg');
      $(`#${sldPre}${sldNum} .sldText`).delay(delayTime).fadeIn(sldTime);
      
       sldTimer = setTimeout(function () {
        sldNum++;
        if (sldNum > $(sld).length) { sldNum = 1; }
        sldWrap.data('sldNum', sldNum);
        sldWrap.slideFade();
      }, sldWait);
      
      $(sldNavDot).not(`#${sldNavPre}${sldNum}`).removeClass('sldNavActive');
      $(`#${sldNavPre}${sldNum}`).addClass('sldNavActive');
    });

  };

  //sldNavDotをクリックしたときのfunction
  sldWrap.on('click', '.sldNavDot', function (){
    var sldNavNum = parseInt($(this).data('sldNum'));

    setTimeout(function () {
      sldWrap.data('sldNum', sldNavNum).slideFade();
    }, 0);
  });

  //load時のfunction
  $(window).load(function () {
    var sldCount = 1;
    var sldNavClass;

    //sldNavDot生成
    $(sld).each(function () {
      if (sldCount === 1) { sldNavClass = 'sldNavDot sldNavActive'; } else { sldNavClass = 'sldNavDot' }
      $(sldNav).append('<div id="sldNav' + sldCount + '" class="' + sldNavClass + '" data-sldNum="' + sldCount + '">&nbsp;</div>');
      sldCount++;
    });

    setTimeout(function () {
      sldWrap.data('sldNum', 1).slideFade();
    }, 0);
  });

数値の取得方法がまずいのではと思いますが、うまくいきません。
よろしくお願いします。

Comments

[kei344]

（質問文は編集できます）HTMLも提示されてはいかがでしょう。

Answer 1

データ属性にcamelCaseの属性名は使わないほうが良いようです。（JavaScriptからアクセスする際に別の意味になる）

  //sldNavDotをクリックしたときのfunction
  sldWrap.on('click', '.sldNavDot', function (e){
    var sldNavNum = parseInt($(this).data('sldnum')); // sldNum ⇒ sldnum なら読めた
console.log(sldNavNum,this);
    setTimeout(function () {
      sldWrap.data('sldNum', sldNavNum).slideFade();
    }, 0);
  });

【データ属性の使用 - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access

dataset オブジェクトを通して data 属性を取得するには、属性名の data- より後の部分を使用して取得します (なお、ダッシュは camelCase に変換されます)。

Comments

[oscar1164]

camelCaseが原因だとは思いも付きませんでした。
jQueryを使うときは思考停止でcamelCaseを使用していたので、気をつけたいと思います。
勉強になりました。ありがとうございました。