如何在jQuery选择器中使用JavaScript变量？

javascript jquery

2022-08-30 01:48:16

如何在jQuery选择器中使用JavaScript变量作为参数？

<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

答案 1

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();
});

答案 2

$(`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"