隐藏按钮并在单击按钮时显示隐藏的p标签

Question

I want a button with two functions when clicked; 我想点击后两个功能按钮; the button should vanish and a hidden p-tag (display: none;) should reveal itself. 按钮应消失和一个隐藏的对 - 标记（显示：无;）应揭示本身。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button.call-us").click(function(){
        $(this).hide();
        $("p.phonenumber").show();
    });
});
</script>
</head>
<body>

<p class="phonenumber" style="display: none;">0271 12222</p><button class="call-us">Call us</button>
</body>
</html>

The code above works flawlessly with w3schools testing tool . 上面的代码与w3schools测试工具完美配合。

But when I try to do it live at my website, nothing happends. 但是，当我尝试将其发布到我的网站上时，没有任何反应。

My .js-file (button-phone.js) contains the following : 我的.js文件 （按钮phone.js） 包含以下内容 ：

(function($)
{
    $("button.call-us").click(function(){
        $(this).hide();
        $("p.phonenumber").show();
    });
});
(jQuery);

It's included in the code, far down, just before the body tag closes 它已包含在代码中，很远，在body标签关闭之前

<script type='text/javascript' src='http://example.com/wp-content/plugins/button/js/button-phone.js?ver=1.0.4'></script>

I have imported the jQuery library in my head-tag 我已经进口了jQuery库在我的脑海标签

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>

HTML HTML

<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p><button class="call-us">Call us</button></p>
</div>

CSS CSS

.phonenumber {
display: none;
}

The p-tag is hidden, but nothing happends when I click the button. P标签是隐藏的，但是当我按一下按钮没有happends。

Any suggestions? 有什么建议么？

Answer 1

Still a typo question... You have an extra closure, remove it and it will work: 仍然是一个错字问题...您有一个额外的封包，请将其删除，它将起作用：

Working example 工作实例

 (function($) { $("button.call-us").click(function() { $(this).hide(); $("p.phonenumber").show(); }); })(jQuery);

 .phonenumber { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="wpb_wrapper"> <p class="phonenumber">555 000 000</p> <p> <button class="call-us">Call us</button> </p> </div>

Answer 2

Change your jQuery to this and it will work 将您的jQuery更改为此，它将起作用

(function($){
    $(".call-us").click(function(){
        $(this).hide();
        $(".phonenumber").show();
    });
});
})(jQuery);

Working Fiddle 工作小提琴

Suggestion, Try to bind jQuery with unique ids or class, don't use common class which you may use on other part of website 建议，尝试将jQuery与唯一的ID或类绑定，不要使用可能在网站其他部分使用的通用类

HTML HTML

<div class="wpb_wrapper">
    <p class="phonenumber" id="PhoneNo">555 000 000</p>
    <p><button class="call-us" id="Call">Call us</button></p>
</div>

And jQuery 和jQuery

(function($){
    $("#Call").click(function(){
        $(this).hide();
        $("#PhoneNo").show();
    });
});
})(jQuery);

And CSS 和CSS

#PhoneNo {
    display: none;
}

Working Fiddle 工作小提琴

Answer 3

Try editing your button-phone.js to the below - 尝试将您的button-phone.js编辑为以下内容-

 (function($) { $("button.call-us").click(function(){ $(this).hide(); $("p.phonenumber").show(); }); })(jQuery);

隐藏按钮并在单击按钮时显示隐藏的p标签

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-07-21 23:27:07

解决方案2
1 2015-07-21 23:26:50

解决方案3
1 2015-07-21 23:30:21

隐藏按钮并在单击按钮时显示隐藏的p标签

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-07-21 23:27:07

解决方案2 1 2015-07-21 23:26:50

解决方案3 1 2015-07-21 23:30:21

解决方案1
2 已采纳 2015-07-21 23:27:07

解决方案2
1 2015-07-21 23:26:50

解决方案3
1 2015-07-21 23:30:21