Question

这是我的问题，

我想在点击事件中使用jQuery隐藏ID'professinoal-panel'标记的div元素。我认为这很简单，但我是jQuery的新手，并且在语法方面遇到了一些困难。

  $("#hideButton").on("click", function(e){
        $('#professional-panel').fadeOut('fast');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-footer">
        				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <span class="fa fa-file-word-o pull-left"></span>
                        <span class="fa fa-file-excel-o pull-left"></span>
                        <span class="fa fa-print custom-print pull-left"></span>
                        <span class="fa fa-envelope-o custom-print pull-left"></span>
                        <input type="button" id="hideButton" value="hide" />
    			    </div>

    <div id="professional-panel">

                                <div class="photo">
                                        <div>
                                            <img src="../images/problem-solving-collaboratorb.jpg" alt="Expert" class="profile-image">
                                        </div>
                                </div>
                                <div class="photo">
                                        <div>
                                            <img src="../images/problem-solving-creatorb.jpg" alt="Expert" class="profile-image">
                                        </div>
                                </div>
                                <div class="photo">
                                        <div>
                                            <img src="../images/problem-solving-investigatorb.jpg" alt="Expert" class="profile-image">
                                        </div>
                                </div>
                                <div class="photo">
                                        <div>
                                            <img src="../images/problem-solving-testerb.jpg" alt="Expert" class="profile-image">
                                        </div>
                                </div>
                                <div class="photo">
                                        <div>
                                            <img src="../images/problem-solving-influencerb.jpg" alt="Expert" class="profile-image">
                                        </div>
                                </div>
                                <div class="photo">
                                        <div>
                                            <img src="../images/problem-solving-decision-makerb.jpg" alt="Expert" class="profile-image">
                                        </div>
                                </div>
							</div>

Answer 1

我最近遇到了同样的问题，对我来说解决方法是在 document.ready 中插入点击功能。

所以对你的情况来说：

$(document).ready(function(){
   $("#hideButton").on("click", function(e){
      $('#professional-panel').fadeOut('fast');
   });
});

这只是为了确保页面已成功加载代码并准备好执行。正如其他人在评论部分中所述，您的代码片段似乎工作得非常完美，这就是为什么我会尝试使用document.ready。

如果这不起作用，并且你对你的页面中加载jQuery绝对肯定，那么让我想出其他的东西。：）

使用jQuery单击隐藏元素

1 个答案: