【问题标题】:How to hide elements after button click in Javascript如何在Javascript中单击按钮后隐藏元素
【发布时间】:2014-09-09 23:33:08
【问题描述】:

我无法在单击部分视图的按钮上隐藏列表。 这就是我想要做的,但下面的代码什么也不做。 谁能帮我解决这个问题?

<script>       
     $(document).ready(function () {
        $('#resultBtn').onclick(function (e) {
            e.preventDefault();
            $('#List').hide();
            commit();
        })
      });
</script>

【问题讨论】:

    标签: javascript button razor jquery-events submit-button


    【解决方案1】:

    我们可能需要一个 JSFiddle,脚本看起来不错,但我想问题实际上来自您的 HTML5 代码。 无论如何,这里有一些建议可能会有所帮助。

    #resultBtn 用驼峰写法,所以#List 应该是#list。另外,如果有问题,请尝试在点击回调函数中console.log('something'),看看是否有问题。

    哦,我终于发现了问题,打开浏览器的控制台应该很容易找到。 您不能在 jQuery 元素上使用 onclick(),它只能使用 click 一个好习惯可能是使用 edit on() (或bind(),总有一天你会发现它很有用。

    $(function() {
        $('#resultBtn').on('click', function(e) {
            e.preventDefault();
            $('#list').hide();
            commit();
        });
    });
    

    希望这有帮助!

    【讨论】:

    • 从 jquery 1.7 开始,bind 已被弃用,您应该继续使用,请参阅:api.jquery.com/on
    • 我按照你的建议做了,但是表格只隐藏了几秒钟,一旦页面在提交时加载,列表就会再次显示。
    • @ZebRawnsley 是的,谢谢。你确定它已被弃用吗,我仍然使用 use 因为有时我发现 unbind() 很有用。
    • @SamViq 当然,每次页面加载时,状态都会被重置。基本上,你不能在两个页面之间保存 JS 状态。您可以做的是使用一些后端代码(例如,我发布了一些数据),或者您可以在 URL 中获取一些获取参数,以了解是否应该显示列表。
    • @Cohars 它仍然有效,但可以在您决定更新 jQuery 参考的任何时候删除,unbind() 的新首选版本是 off()
    【解决方案2】:

    使元素不可见,但将其视为仍然存在:

    document.getElementById("resultBtn").onclick = function() {
    document.getElementById("List").style.visibility = "hidden";
    return false;
    }
    

    隐藏元素并将其视为不存在:

    document.getElementById("resultBtn").onclick = function() {
    document.getElementById("List").style.display = "none";
    return false;
    }
    

    【讨论】:

    • 至少在现代浏览器中还有document.getElementById("List").hidden = true;。 :-)
    • @RobG 我认为他想使用 jQuery 我也不推荐它,但如果他想解决他在 cmets 中提到的问题,保持简单可能会很有用。无论如何,你忘记了return false。请不要仅仅为了让你的答案排在首位而对好的答案投反对票。
    • @Cohars——不是我的反对票,不是我的回答。我只是建议另一种方法来隐藏 this 答案的元素。
    • 我从来没有否决任何其他答案...并不是说我知道我在做什么,因为我对 jQuery 知之甚少。我也会添加 return false 。 (你说得对,我忘了那部分)
    【解决方案3】:

    您可以将 display 属性设置为 none 以隐藏元素

    $(document).ready(function () {
                $('#resultBtn').onclick(function (e) {
                    e.preventDefault();
                    $('#List').css('display','none'); //<--- like here
                    commit();
                })
              });
    

    【讨论】:

    • 这是实现您想要做的事情的另一种方式。将 display 属性设置为 none 时究竟会发生什么?
    • @Ishita 该列表隐藏了onclick,但一旦提交页面就会显示回来。
    • aah.. 好吧.. 我可以看到 Cohor 已经回答了你的问题。但是,请确保在您提出问题时更加清楚并包含所有详细信息:)
    猜你喜欢
    • 2017-02-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多