Question

我想在我的加载页面中使用JQuery noConflict（）。

这是我加载页面的JavaScript：

<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function($) {
        // initial page load
        $('#area').load('pages/home/home.php');
        $("ul.sidebar-menu li a.Dashboard").addClass("hidups");
        $('ul.sidebar-menu li a').click(function() {
            var page = $(this).attr('href');
            document.title = "Admin | " + page;
            $("ul.sidebar-menu li a").removeClass("hidups");
            $(this).addClass("hidups");
            $('#area').load('pages/' + page + '/' + page + '.php', '', function(response, status, xhr) {
                if (status == 'error') {
                    $("#area").load('pages/error/404.php');
                }
            });
            return false;
        });
    });
</script>

这是加载后的页面上的脚本（product.php）：

<link rel="stylesheet" href="build/css/alertify.core.css" />
<link rel="stylesheet" href="build/css/alertify.default.css" id="toggleCSS" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<style type="text/css">
    .modal-body2 {
        height: 300px;
        overflow-y: scroll;
        padding: 15px;
        position: relative;
    }
    .centerd {
        bottom: 0;
        left: 0;
        margin: auto;
        position: static;
        right: 0;
        top: 0;
        width: 50%;
    }
</style>

<script src="plugins/jQuery/jquery-1.8.3.min.js"></script>
<script src="build/js/alertify.min.js"></script>
<script type="text/javascript" src="plugins/tinymce/tinymce.min.js"</script>
<script type="text/javascript" src="pages/produk/aplikasi.js"></script>

<?php
// memanggil berkas koneksi.php
require '../../config/koneksi.php';
?>

<div class="content-wrapper">
   <!-- Content Header (Page header) -->
   <section class="content-header">
      <h1>
         Jammin
         <small>Data</small>
      </h1>
      <ol class="breadcrumb">
         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
         <li><a href="#">Tables</a></li>
         <li class="active">Data Produk</li>
      </ol>
   </section>
   <!-- tempat untuk menampilkan data mahasiswa -->
   <section class="content">
      <div class="row">
         <div class="col-xs-12">
            <div class="box">
               <div class="box-header">
                  <h3 class="box-title">Data Produk</h3>
                  <a href="#myModal" id="0" class="tambah btn btn-default" data-toggle="modal" style="color:black">
                  Tambah Data </a>
                  <button type="button" class="btn btn-danger" id="delete-all">
                  <i class="icon-plus"></i> Hapus Semua Data
                  </button>
               </div>
               <div class="box-body">
                  <div id="data-produk"> </div>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>
<!-- awal untuk modal dialog -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Tambah Data Produk</h3>
         </div>
         <div class="modal-body2">
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
            <button id="simpan-produk" class="btn btn-success" data-dismiss="modal" aria-hidden="true" >Simpan Data</button>
         </div>
      </div>
   </div>
</div>

但这不起作用，因为JQuery.min已“崩溃”。我想我应该使用jquery.noConflict来修复它，但我不知道如何将jquery.noConflict用于我的加载页面。

Answer 1

有几种方法可以解决这个问题，我最喜欢的是关闭。

;(function($){
    //$ is now safe here eg. $.('.selector');
})(jQuery);

或

在使用需要美元符号的其他库（例如prototype

）之前，只需使用$ .noConflict

OR

只需使用jQuery代替$，这将使您的代码不那么便携，不那么漂亮:)。

Answer 2

将此用于jQuerynoConflict

<script type="text/javascript">
JQuery(document).ready(function($) {

// initial page load
        JQuery('#area').load('pages/home/home.php');
        JQuery("ul.sidebar-menu li a.Dashboard").addClass("hidups");
        JQuery('ul.sidebar-menu li a').click(function(){

        var page = JQuery(this).attr('href');
        document.title="Admin | "+page;
        JQuery("ul.sidebar-menu li a").removeClass("hidups");
        JQuery(this).addClass("hidups");  
        JQuery('#area').load('pages/'+page+'/'+ page +'.php' , '', function(response, status, xhr) {
                if (status == 'error') {
                    JQuery("#area").load('pages/error/404.php');
                }
            });

        return false;
        });
        }); 

</script>

如何使用JQuery noConflict（）来加载页面

2 个答案: