Question

我正在使用codeigniter篝火来创建一个Web应用程序。我正在使用jquery的简单hide（）和show（）函数，但它不起作用。我将在控制台上检查所有脚本没有错误。我无法理解为什么它不起作用。我包括jquery文件： -

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/before.load.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-ui.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-migrate-1.2.1.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/bootstrap/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/richmarker-compiled.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/smoothscroll.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-select.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.hotkeys.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.nouislider.all.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/custom.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/maps.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/star-rating.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.gmap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/locationpicker.jquery.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-editable.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.timeago.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.magnific-popup.js" type="text/javascript" ></script>

正确包含所有文件。包含文件没有问题。 Jquery代码是 - ：

<script>
function regis_form() {
    $('#is_owner').change(function() {
        if (this.checked) {
            $('#registration_fields').show();
        } else
            $('#registration_fields').hide();
    });
}
</script>

在页脚我调用regis_form（）;喜欢： -

$(document).ready(function(){
    regis_form()
});

函数也正确调用但div没有显示或隐藏。包含jquery文件的序列有什么问题吗？

Answer 1

以下代码段似乎对我有用，

<html>
<head>
<script src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript" ></script>
<script>
    function regis_form()
    {
        $('#is_owner').change(function () {
        console.log("checked"+this.checked);
        if(this.checked)
        {
           $('#registration_fields').show();
        } 
        else 
            $('#registration_fields').hide();
        });
    }

</script>
</head>
<body>
    <input type="checkbox" id="is_owner" />
    <div id="registration_fields">
        <p>Content visible</p>
    </div>
    <footer>
        <script>
            $(document).ready(function(){
                regis_form();
            });
        </script>
    </footer>
</body>
</html>

function regis_form() {
  $('#is_owner').change(function() {
    console.log("checked" + this.checked);
    if (this.checked) {
      $('#registration_fields').show();
    } else
      $('#registration_fields').hide();
  });
}
$(document).ready(function() {
  regis_form();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
  <p>Content visible</p>
</div>

Answer 2

<强>原因：

调用了函数，但问题是未触发事件。

<强>解决方案：

包括jquery

 <script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>

将代码放入$（document）.ready function

$(document).ready(function(){

 $('#is_owner').click(function () {

 //console.log($(this).prop("checked));

   if($(this).prop("checked") == true){

       $('#registration_fields').show();

   }else{ 

      $('#registration_fields').hide();

   } 

 });     
});

希望它有所帮助.....

Answer 3

首先在头文件上放置脚本

然后你会用它 Jquery的（＆＃39;＃标识＆＃39）。隐藏（）; 要么 Jquery的（＆＃39;＃标识＆＃39）显示（）;

Jquery hide（），show（）函数不起作用

3 个答案: