jQueryの各変数の共通部分を、短くまとめる方法

Question

【場面】
以下のようなHTMLがあったとき、各ボタンを押すとそれに対応したhtmlを挿入したいと考えています。
【解決したいこと】
jQueryの各変数の共通部分を、どうにかして短くまとめたい。

//html

<div class="add_name1">名前１を追加するボタン</div>
<div class="add_name2">名前２を追加するボタン</div>
<div class="add_name3">名前３を追加するボタン</div>

//jQuery

var name1 = `
		<div class="sample">
			<input type="text" name="name1[]">
		</div>
	`;
var name2 = `
		<div class="sample">
			<input type="text" name="name2[]">
		</div>
	`;
var name3 = `
		<div class="sample">
			<input type="text" name="name3[]">
		</div>
	`;

// 名前１を追加するボタンが押されたとき
$('.add_name1').on('click',function(){
	$(this).after(name1);
});
// 名前２を追加するボタンが押されたとき
$('.add_name2').on('click',function(){
	$(this).after(name2);
});
// 名前３を追加するボタンが押されたとき
$('.add_name3').on('click',function(){
	$(this).after(name3);
});

上記のコードで、確かに想定した動き（各ボタンを押すとそれに対応したhtmlを挿入）ができるのですが、どうしても気になることがあります。

それは、各varの中の「<div class="sample">」「</div>」が何度もコード内に出てくることです
。

関数などを使って、何回も「<div class="sample">」「</div>」を書かなくて済む方法があれば知りたいのですが、どのように書けばよいかわかりません。

例えば、phpなら、以下のように書けばいいと思うのですが、jQueryでの書き方がわかりません。

//php

function hoge($name){
	echo '<div class="sample"><input type="text" name="'.$name.'[]"></div>';
}

//関数hoge($name)を使用することで、何度も同じコード（div class="sample">～）を書かなくて済む
$name1 = hoge('name1');
$name2 = hoge('name2');
$name3 = hoge('name3');

初歩的な質問で大変お恥ずかしいのですが、ご存知の方がいらっしゃいましたら、どうかご教授いただけましたら幸いです。

何卒、よろしくお願いいたします。

Answer 1

もしHTMLを変更できない事情があるなら質問者さんのphpコード（のjs移植）も利用してこれで

function hoge(name) {
  return `<div class="sample"><input type="text" name="${name}[]"></div>`;
}

$('.add_name1, .add_name2, .add_name3').on('click', function(){
    $(this).after(hoge(this.className.replace('add_', '')));
});

Comments

[yayak]

jqueryの関数の使い方がずばりわかり、感謝申し上げます。
有難うございます！まさに知りたいと思っていたコードです！

Answer 2

jQueryの問題ではないように思います。

yambejpさんが答えてらっしゃる内容にかぶりますが、ボタン(今の場合div)のクラスについては共通にし、別途なんらか固有のデータを持たせるほうが良いと思います。

私の場合、idを振っています。

また重複の記述を嫌うことについては、javascriptで関数化して動的に生成するのが良いと思います。

例の場合は、idをそのままnameとして埋め込んでいます。

	<div class="add_name" id="name1">no1</div>
	<div class="add_name" id="name2">no2</div>
	<div class="add_name" id="name3">no3</div>

$('.add_name').on('click',function(){

    $(this).after(function(id){
    	let adddiv = `<div class="sample">
            		<input type="text" name="${id}">
        	　　　</div>`;
    	return adddiv;

    }(this.id));
});

Comments

[yayak]

letの使い方、はじめて知りました！
本当に勉強不足を痛感します、、
丁寧でわかりやすい回答をくださり有難うございます！

Answer 3

クラスを統一し、カスタムデータをつけると管理が楽かも
nameも変数名を変えずに共用で処理するとよいでしょう

• codepen

Comments

[yambejp]

<div class="add_name" data-add="1">名前１を追加するボタン</div>
<div class="add_name" data-add="2">名前２を追加するボタン</div>
<div class="add_name" data-add="3">名前３を追加するボタン</div>

[yambejp]

ちなみに今の仕様ですとクリックするたびにinputが追加されていきますが
そうではなく、例えばもう一度クリックするとinputが削除されるとか
もう一度クリックしても複数は追加されないとか
仕様が違うなら指示ください

[yayak]

本当にスマートなコードで、ただただ感動を覚えます。
こんな発想もあるのかと勉強になりました、本当に感謝いたします。
有難うございます！！