- ベストアンサー
touchSliderを復数設置した際の問題と解決方法
- touchSliderを復数設置した際に起こるカウントの問題を解決する方法について教えてください。
- 質問者は、touchSliderというjqueryのプラグインを使用しようとしていますが、同一ページに復数のスライダーを設置すると、3番目のスライダーの次へボタンを押すと全てのカウントが動いてしまうという問題に直面しています。
- 質問者は、プラグインを修正するか、該当箇所に連番でclassやidを追加することを検討していますが、解決方法が分からないため、アドバイスを求めています。
- kaji102s
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数11
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
セレクタがクラス指定だけなので、全部に反映されてしまうのはご推察の通りでしょう。 APIなどから処理中の要素が取得できれば簡単なのですが、このプラグインはその様には作成されていないのかも。 （thisは自分を返すみたいだし、ドキュメント情報が見つからなかったので不明ですが） とりあえずの方法として、個別に設定することにすればなんとかなるのではないでしょうか。 ANo1様と同様の発想ですが、jQuery利用なので繰り返し記述する必要はないでしょう。 （classは現状のままで、id等は不要です） （全角空白は半角に） $(document).ready(function(){ $('.gallery').each(function(){ var obj = $(this); obj.touchSlider({ mode: 'index', center: true, prevLink: 'a.prev', nextLink: 'a.next', single: true, onChange: function(prev, curr) { $('.counter', obj).html((curr+1)+'/'+ obj.get(0).getCount()); } }); }); }); ※ start時にはchangeのイベント処理も呼ばれているようなので省略。 ※ ご提示のサンプルで要素idが重複しているのは文法違反ですのでご注意。
その他の回答 (1)
- ONEONE
- ベストアンサー率48% (279/575)
連番なりclassなりidなりを追加して見るのが早いですよ。 たとえば、.gallaryと.counterはそれぞれ後ろに連番をふって三回書いてください。 1回目の例は下記です。 htmlも同様に連番を振って記述してください。 それでうまく動くはずです。 $('.gallery1').touchSlider({ mode: 'index', center: true, prevLink: 'a.prev', nextLink: 'a.next', single: true, onChange: function(prev, curr) { $('.counter1').html((curr+1)+'/'+ $('.gallery1').get(0).getCount()); }, onStart: function(){ $('.counter1').html('1/' + $('.gallery1').get(0).getCount()); } });
お礼
ご回答ありがとうございます！ すいません書き忘れていたのですが スライダー部分は一つのテンプレートでシステムで 復数表示させている仕様になっていまして できればひとつのjsで出来ないかなと思ったしだいです 難しいようようでしたら ONEONEさんのご回答頂いたとおり jqueryでclassやidを追加してやったほうが早いと思いますので それで進めていきたいと思っています！
お礼
無事個別でカウント部分が動くようになりました 細かい部分まで本当にありがとうございます！