JQueryでidの連番を取得したいです。

Question

前提・実現したいこと

$(function () {
  $('#hide-text1').on('click', () => {
      $('#text1').show('slow');
  });
});

$(function () {
  $('#hide-text2').on('click', () => {
      $('#text2').show('slow');
  });
});

$(function () {
  $('#hide-text3').on('click', () => {
      $('#text3').show('slow');
  });
});

このように書けば実装はできますが、このままだと記述が多くなってしまいます。
その為、idの連番を取得したいです。

###試したこと

let i = 1
$(function () {
  $('#hide-text1'+(i++)).on('click', () => {
      $('#text1'+(i++)).show('slow');
  });
});

iで足していき取得しようとしたが、うまくいきませんでした。
アドバイスを頂きたいです。よろしくお願いします。

###追記

@categories.each do |category|
  <div class="title" id="hide-text">
    = category.name
  </div>
  <div class="category" id="text">
    category.children.each do |child|
      = child.name
    end
  </div>
end

.category {
  display: none;
}

$(function(){
  $('div.title').each(function(i){
      $(this).attr('id','hide-text' + (i+1));
  });
});

$(function(){
  $('div.category').each(function(i){
      $(this).attr('id','text' + (i+1));
  });
});

Comments

[sousuke]

classとかは使ってはいけない縛りとかあるのですか？

[m.ts10806]

思った通りに振られないのは当然として
$('#hide-text1'+(i++))

これだと #hide-text11 になります。

[test]

縛りは無いです！
classでも問題ないです。

[m.ts10806]

では、HTML、CSSを提示してください。
JavaScriptのコードだけで法則性は見えませんし、動作確認が出来ません。

[test]

追記をしましたので、ご確認の程よろしくお願いします。

[m.ts10806]

＞Haml

ブラウザに出力されたHTMLを提示された方が良いかと思います。
動作確認のためにフレームワークやテンプレートエンジンなどわざわざ環境準備しなければなりませんし、現在の質問にはHamlに関係するタグがついていません。

[test]

ご指摘ありがとうございます。今後htmlで記述するようにします。

[m.ts10806]

ブラウザに出力されたHTMLを提示してください。

Answer 1

クラスを振るほうが早いと思いますが、とりあえずこうもできます。

$(function () {
  $('[id^="hide-text"]').on('click', () => {
      // やりたいことをかく
  });
});

【属性セレクター - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

Comments

[test]

ご回答ありがとうございます！
そのコードですと全てのidに反映されてしまいます。
個々のidとして取得したいです。

[sousuke]

どういうことかわかりません…idならイベント内で取れるのでそれで分岐しては？

[kei344]

追記のHTML構造なら、「$(this).next().show('slow');」でできるよ。
そもそも追記のHamlでid="hide-text"とかやってるからそもそも連番付いてないですが･･･。（HTMLの構文上おかしいのでidを使用しない組み方に変えるべきです）

[kei344]

<div class="title hide-text"></div>とかやってクラスで取得すればよいのに。

[kyoya0819]

念のため

修正・追記依頼欄より
> classでも問題ないです。

Answer 2

$(function(){

$('div.title').on('click', function() {
  $(this).next('div.category').show('slow');
});

});

ちなみに、これは個人的なことですが、
jQueryはthisの扱いが従来のJSと同じだからこそ、便利さを発揮するものだと思うので、
jQueryでのクロージャはアロー関数ではなく、functionキーワード使うべきかなーと思います。
（回答のコードもそうしてます）

Comments

[test]

ご回答ありがとうございます！