JavaScript変数をjQueryセレクターのパラメーターとして使用するにはどうすればよいですか？
<script type="text/javascript">
$(function(){
$("input").click(function(){
var x = $(this).attr("name");
$("input[id=x]").hide();
});
});
</script>
<input type="text" id="bx"/><input type="button" name="bx"/>
<input type="text" id="by"/><input type="button" name="by"/>
基本的に私がやりたいidことは、クリックされている要素の名前に等しいを持つ要素を非表示にできるようにすることです。
回答:
var name = this.name;
$("input[name=" + name + "]").hide();
または、このようなことができます。
var id = this.id;
$('#' + id).hide();
または、いくつかの効果を与えることもできます。
$("#" + this.id).slideUp();要素全体を完全に削除する場合は、ページを形成します。
$("#" + this.id).remove();これでもお使いいただけます。
$("#" + this.id).slideUp('slow', function (){
$("#" + this.id).remove();
});
$(`input[id="${this.name}"]`).hide();IDを使用しているため、パフォーマンスが向上します
$(`#${this.name}`).hide();ボタンクリックで要素を非表示にする方法について、より具体的にすることを強くお勧めします。代わりにデータ属性を使用することを選択します。例えば
<input id="bx" type="text">
<button type="button" data-target="#bx" data-method="hide">Hide some input</button>
次に、JavaScriptで
// using event delegation so no need to wrap it in .ready()
$(document).on('click', 'button[data-target]', function() {
var $this = $(this),
target = $($this.data('target')),
method = $this.data('method') || 'hide';
target[method]();
});
これで、ターゲットとする要素と、HTMLを介してそれに何が起こるかを完全に制御できます。たとえば、data-target=".some-class"およびdata-method="fadeOut"を使用して、要素のコレクションをフェードアウトできます。
$("input").click(function(){
var name = $(this).attr("name");
$('input[name="' + name + '"]').hide();
});
IDでも機能します。
var id = $(this).attr("id");
$('input[id="' + id + '"]').hide();
いつ、（時々）
$('input#' + id).hide();、動作しないことが必要として。
両方を行うこともできます。
$('input[name="' + name + '"][id="' + id + '"]').hide();ES6文字列テンプレート
IE / EDGEサポートが必要ない場合の簡単な方法を次に示します
$(`input[id=${x}]`).hide();または
$(`input[id=${$(this).attr("name")}]`).hide();これは、テンプレート文字列と呼ばれるes6機能です
文字列の連結
IE / EDGEサポートが必要な場合
$("#" + $(this).attr("name")).hide();データ属性としてのDOMのセレクター
これはあなたがコードを本当にDRYにするので私の好みの方法です
// HTML
<input type="text" id="bx" />
<input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick"/>
//JS
$($(this).data("input-sel")).hide();