javascript - 根据div可见性jquery显示或隐藏按钮

Question

我的页面上有 2 个按钮，例如按钮 1 和按钮 2。下面还有一个 div。
像下面这样的东西。

    $("#button1,#button2").click(function () {
            $("#div1").toggle("Slow");
    
            if ($("#div1").is(':visible')) {               
                $('#button1').show();
                $('#button2').hide();
            } else {            
                $('#button1').hide();
                $('#button2').show();
            }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
          <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25">
          <br>
          <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25">
    </div>
    <div id="div1">
          Welcome!!!
    </div>

这似乎不起作用。

Answer 1

在您的代码中，无论按下哪个按钮，都应将其拆分为 2 个函数或使用 $(this) 来引用已按下的按钮:

    $("#button1,#button2").click(function () {
        $("#div1").toggle("Slow");
    
        $('input').each(function(){
            //show all button
            $(this).show();
        })

        //hide pressed button
        $(this).hide();
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
          <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25">
          <br>
          <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25">
    </div>
    <div id="div1">
          Welcome!!!
    </div>

您可以在此处查看一个实例:

https://jsfiddle.net/xv6eorkk/

(还应该在开头用css隐藏你想要的按钮，使其更真实)