Question

我想在这里做的就是当我的任何一个文本框都有焦点时删除我的页脚。我正在使用jquery尝试这样做。所以目前我有两个文本框，第一个完美地工作。现在，第二个文本框在聚焦或未聚焦时不会执行。谁知道我在哪里错了？

文本框1 HTML

<div id="inputAreaTextbox">
    <input type="text" id="textbox" name="username" class="tbinputArea" placeholder="Username" autocomplete="off">
</div>

文本框2 HTML

<div id="inputAreaTextbox">
    <input type="password" id="textbox" name="password" class="tbinputArea" placeholder="Password" autocomplete="off">
</div>

页脚HTML

<div id="footer">
    <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>

Jquery的

<script src="JAVASCRIPT/jquery-3.1.0.min.js"></script>
<script>
    $( "#textbox" ).focus(function() {
        $("#footer").hide();
    });

    $( "#textbox" ).focusout(function() {
        $("#footer").show();
    });
</script>

Answer 1

jQuery #id选择器docs：

每个id值只能在文档中使用一次。 如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中第一个匹配的元素。但是，不应依赖此行为;使用相同ID的多个元素的文档无效。

所以在你的jquery代码中使用class tbinputArea而不是id textbox：

$(".tbinputArea").focus(function() {
  $("#footer").hide();
});

$(".tbinputArea").focusout(function() {
  $("#footer").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="inputAreaTextbox">
  <input type="text" id="textbox" name="username" class="tbinputArea" placeholder="Username" autocomplete="off">
</div>

<div id="inputAreaTextbox">
  <input type="password" id="textbox" name="password" class="tbinputArea" placeholder="Password" autocomplete="off">
</div>

<div id="footer">
  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>

Answer 2

Id属性是唯一的，2个元素不能具有相同的id。您可以按如下方式使用该类：

$(".tbinputArea").focus(function() {
  $("#footer").hide();
}).focusout(function() {
  $("#footer").show();
});

重命名ID：

<div id="inputAreaTextbox">
    <input type="text" id="textbox1" name="username" class="tbinputArea" placeholder="Username" autocomplete="off">
</div>

<div id="inputAreaTextbox">
    <input type="password" id="textbox2" name="password" class="tbinputArea" placeholder="Password" autocomplete="off">
</div>

当专注于文本框不工作时删除页脚？

2 个答案: