jquery＆html 要素を繰り返し使用して別の値を出す方法

Question

プログラミング初心者です。
質問がへたくそですみません。

カラーピッカーを無数に作れるようにしたいのに下記の要素が同じだと値がかぶったり上手く作動しません。

$(".color-dialog")

ただ一つ一つ、違う要素を入れるのはしんどいため、何か方法がないか悩んでいるところです。

下記を試しているところです。

アドバイスを頂けますでしょうか。
よろしくお願いします。

<script type="text/javascript">
	$(function(){
		$(".color-dialog").on("change", function(){
            $('#label1').css("color", $('.color-dialog').val())
            $('#area1').text($('.color-dialog').val());
        });
        $(".color-dialog1").on("change", function(){
            $('#label2').css("color", $('.color-dialog1').val())
            $('#area2').text($('.color-dialog1').val());
		});
	});
</script>


<td><label id="label1">list</label></br></br>
<input class="color-dialog" type="color" value="#ffffff"></br></br>select： <span id="area1"></span></br>


<td><label id="label2">list</label></br></br>
<input class="color-dialog1" type="color" value="#ffffff"></br></br>select： <span id="area2"></span>

Comments

[kyoya0819]

どうでもいいですけどtd閉じタグないですよ

[tete2]

うっかりしてました！ありがとうございます。

Answer 1

すべて id が振ってあるなら例えば aria-controls 属性を使って

<input class="color-dialog" type="color" value="#ffffff" aria-controls="label1 area1">

        $('[type="color"][aria-controls]').on('change', function(event) {
            const target = $(event.target);
            const val = target.val();
            $('#' + target.attr('aria-controls').replace(/ +/g, ',#')).each(function(index, element) {
                if (element.nodeName.toLowerCase() === 'label') {
                    $(element).css('color', val);
                } else {
                    $(element).text(val);
                }
            });
        });

Comments

[tete2]

ありがとうございます！
参考にします。

Answer 2

一つ一つ、違う要素を入れるのはしんどい

• jsでidを指定するのがだるい
• 複数のhtmlを記述するのがだるい

のどちらかで処理が異なります
前者ならidのように個別指定が必要なものを排除し、
クラスと相対位置で処理すればよいでしょう

<script>
$(function(){
  $(".color-dialog").on("change", function(){
    $(this).prevAll('label').css("color", $(this).val());
    $(this).nextAll('span').text($(this).val());
    console.log($(this).nextAll('span'));
  }).trigger('change');
});
</script>
<div>
<label>list</label></br>
<input class="color-dialog" type="color" value="#ffffff"></br>
select： <span></span>
</div>
<div>
<label>list</label></br>
<input class="color-dialog" type="color" value="#ffffff"></br>
select： <span></span>
</div>
<div>
<label>list</label></br>
<input class="color-dialog" type="color" value="#ffffff"></br>
select： <span></span>
</div>

Comments

[tete2]

複数のhtmlを記述するのがだるいでした！！
質問の説明が足りなかったんですね。
でもお陰様でなんとかできそうです！
ありがとうございます。

Answer 3

もしも、HTML&JavaScriptを書くのがめんどくさいならPHPか何かでforかwhileでループ生成すれば良いと思います。

追記

以下はjQuery書くのがめんどくさいと想定してのコードです。

<label id="label1">list</label>
<input class="color-dialog" type="color" value="#ffffff" id="c1">
select： <span id="area1"></span>；<br>
<label id="label2">list</label>
<input class="color-dialog" type="color" value="#ffffff" id="c2">
select： <span id="area2"></span>；

$(function(){
  $(".color-dialog").on("change", function(){
    var id = $(this).attr("id").replace("c", "");
    $('#label'+id).css("color", $('#c'+id).val());
    $('#area'+id).text($('#c'+id).val());
  });
});

Comments

[tete2]

ご丁寧にありがとうございました！！
お陰様でなんとかクリアできそうです！