前提・実現したいこと

すみません、超初心者です
こちらの構文を簡単にする方法を探しています。
同じ命令を繰り返しているのですが、IDとクラス名だけ変更してます
配列などを使えばいいのだと思いますが、いまいち理解できてません
どなたかご教示願えないでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード


jQuery(function ($) {

$('#js-count01').keyup(function(){
    var count = $(this).val().length;
    $('.show-count01').val(count);
  });
	$('#js-count02').keyup(function(){
    var count = $(this).val().length;
    $('.show-count02').val(count);
  });
		$('#js-count03').keyup(function(){
    var count = $(this).val().length;
    $('.show-count03').val(count);
  });
	$('#js-count04').keyup(function(){
    var count = $(this).val().length;
    $('.show-count04').val(count);
  });
	
	
});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

html

</form>

</form>

</form>

kei344

2019/09/18 03:10

HTMLの構造も提示してください。

kei344

2019/09/18 03:32

（質問文は編集できます）質問文のHTMLもコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、閉じタグの数が多いなどHTMLの構文として正しくない可能性が高いです。構文が正しくない場合JavaScriptでの操作にも影響があるため、なるべく正しい実際のコードを提示することをお勧めします。

行動規範の内容に同意します

回答3件

現状をそのままゴリゴリloopに換えるならこんな感じ

js
1const elementsQty = 4;
2for(let i=0; i<elementsQty; i++) {
3  const zeroPadded = ('00' + i).substring(('00' + i).length - 2);
4  const selector = `#js-count${zeroPadded}`;
5  $(selector).keyup(function(evt){
6    const count = evt.target.val().length;
7    const targetSelector = `.${evt.target.id.replace('js', 'show')}`;
8    $(targetSelector).val(count);
9  });
10}

投稿2019/09/18 03:21

thyda.eiqau

総合スコア2982

ベストアンサー

クラスの振り方を変えたほうがよいですね

javascript
1<script>
2$(function(){
3  $('.js-count').on('keyup',function(){
4    var idx=$('.js-count').index(this);
5    $('.show-count').eq(idx).val($(this).val().length);
6  });  
7});
8</script>
9<input type="text" class="js-count"><input type="text" class="show-count" readonly tabindex="-1"><br>
10<input type="text" class="js-count"><input type="text" class="show-count" readonly tabindex="-1"><br>
11<input type="text" class="js-count"><input type="text" class="show-count" readonly tabindex="-1"><br>
12<input type="text" class="js-count"><input type="text" class="show-count" readonly tabindex="-1"><br>

追記

どうしてもidやクラスを変えたくないならこうです

javascript
1<script>
2$(function(){
3  $('#js-count01,#js-count02,#js-count03,#js-count04').on('keyup',function(){
4    var num=$(this).attr('id').substr(-2);
5    $('.show-count'+num).val($(this).val().length);
6  });  
7});
8</script>
9<input type="text" id="js-count01"><input type="text" class="show-count01" readonly tabindex="-1"><br>
10<input type="text" id="js-count02"><input type="text" class="show-count02" readonly tabindex="-1"><br>
11<input type="text" id="js-count03"><input type="text" class="show-count03" readonly tabindex="-1"><br>
12<input type="text" id="js-count04"><input type="text" class="show-count04" readonly tabindex="-1"><br>

投稿2019/09/18 03:12

編集2019/09/18 03:25

yambejp

総合スコア116661

kazuyaaan

2019/09/18 03:44

クラス名は変えたく無かったので2つめの方法で解決しました。初めての質問だったので、とても嬉しいです！！ありがとうございました！！

行動規範の内容に同意します

関数を使うのがいいだろうと思います。

関数を定義します。関数とは、よく使用する処理をサブルーチンとして定義するものです。

関数（Function）

js
1  $('#js-count01').keyup(function(){
2    var count = $(this).val().length;
3    $('.show-count01').val(count);
4  });

↓

js
1function hoge( jsString, showString ){
2  $(jsString).keyup(function(){
3    var count = $(this).val().length;
4    $(showString).val(count);
5  });
6}
7hoge( '#js-count01', '.show-count01' );