主页 / 问题 / 683499
Accepted
Kiral
Asked:2020-06-25 17:46:23 +0000 UTC2020-06-25 17:46:23 +0000 UTC

单击更改对象 ID

  • 772

伙计们，请帮我解决这个问题。我只能用js。

有必要在点击时，class =navbar-menu和 id =的对象的 idmenuburger更改为 id = menuclose，并且在第二次单击时更改回 id = menuburger。

我发现了类似的东西，但是，该死的，我没有足够的头脑来为自己制作它：

$('div').click(function(event) {
  //Удаляем старые id
  $('#menuburger').attr('id', null);
  $('#menuclose').attr('id', null);

  //Ставим новые
  $(this).parent().prev().attr('id', 'menuburger');
  $(this).attr('id', 'menuclose'); 
});`

请帮帮我！

javascript

3 个回答

  1. 从问题来看，你只需要隐藏/显示菜单，我当然不是一个伟大的js专家，但页面上的id必须是唯一的（假设你的页面上有10个这样的菜单，怎么办然后用id？），所以，要显示/隐藏菜单，我不会使用更改id，最好的选择是在点击时添加一个类（让它被称为不可见），并在下一次点击时将其删除。

    这是一个简短的 JS 代码示例：

    document.getElementById("menuburger").addEventListener("click", function() {
  document.getElementById("test").classList.toggle("invisible");
});
    .invisible {
  display: none;
}
    <button id="menuburger">test it</button>

<div id="test" style="background-color:red">this is some menu or whatever</div>

    • 0
  2. Best Answer

    如果我理解正确，那么您将id通过更改和/或在此基础上构建js代码逻辑来控制菜单的外观。这是一个坏主意，因为它违反了 html 标准和编写此类内容的常见做法。正如您在问题的评论中已经被正确建议的那样，这件事需要通过更改类来实现。实际上，只要深入研究代码逻辑的实现，您就会明白，更改id元素DOM是在代码中混淆您现在拥有什么以及应该做什么的方式。

    但要回答你的问题：

    首先，在您的变体中，您没有纯js，而是js使用JQUery.

    其次，您提供的代码不起作用，它id不会更改相同的元素。你可以在这里查看：

    $('div').click(function(event) {
  //Удаляем старые id
  $('#menuburger').attr('id', null);
  $('#menuclose').attr('id', null);

  //Ставим новые
  $(this).parent().prev().attr('id', 'menuburger');
  $(this).attr('id', 'menuclose');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuburger">test</div>

    第三，即使这段代码被更正了，它仍然不会工作，因为经过这些技巧的事件处理程序将不再理解它们需要什么——由于没有人假设这样的应用程序逻辑，这种情况会再次发生。你可以在这里查看：

    $('#menuburger.navbar-menu').click(function() {
  $(this).attr('id', 'menuclose');
});
$('#menuclose.navbar-menu').click(function() {
  $(this).attr('id', 'menuburger');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuclose" class="navbar-menu">test</div>

    总之，我只能再一次建议你为这样的事情使用类。

    • 0

  3. 通过z-index解决了问题）非常感谢大家的回复！

    `<script>
$(document).ready(function() {
    $('#menuburger').on('click', function (){
        $('#menuclose').css('z-index','11');
    });

   $('#menuclose, #menuclosebg, #menucloselink').on('click', function (){
       $('#menuclose').css('z-index','9');
   })
});
</script>`
    • 0

相关问题