Question

点击时我想要一个带有两个功能的按钮;按钮应该消失，隐藏的p-tag（display：none;）应该显示出来。

<!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>

上面的代码与w3schools testing tool完美配合。

但是当我尝试在我的网站上实现时，没有任何事情发生。

我的.js文件（button-phone.js）包含以下内容：

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

它包含在代码中，远远低于正文标记关闭之前

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

我已经在我的head-tag

中导入了jQuery库

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

HTML

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

CSS

.phonenumber {
display: none;
}

隐藏了p标记，但单击按钮时没有任何事情发生。

有什么建议吗？

Answer 1

仍然是一个错字问题......你有一个额外的关闭，删除它，它会工作：

Working example

＆＃13;

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

＆＃13;

.phonenumber {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

将您的jQuery更改为此，它将起作用

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

Working Fiddle

建议，尝试将jQuery绑定到唯一的ID或类，不要使用可在网站其他部分使用的公共类

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>

和jQuery

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

和CSS

#PhoneNo {
    display: none;
}

Working Fiddle

Answer 3

尝试将button-phone.js编辑到下面 -

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

隐藏按钮并在按钮单击时显示隐藏的p-tag

3 个答案: