Leaderboard系统中两个jQuery脚本冲突问题求助

嘿，我来帮你搞定这个jQuery脚本冲突的问题！先从你给出的代码和常见冲突场景一步步分析：

1. 先修复搜索栏代码里的明显错误 #

你贴的搜索栏代码里有个一眼就能看到的问题：$("search") 这个选择器是在找HTML里的<search>标签，但你的搜索栏应该是带id/class的input元素吧？比如如果搜索栏的id是search，得写成 $("#search")；如果是class，就用$(".search")。这个错误不仅会让搜索功能失效，也可能间接引发脚本冲突，先把这个改了再说。

另外你代码里的containsi扩展好像没写完，完整的不区分大小写的contains选择器扩展应该是这样的：

$.extend($.expr[':'], {
  containsi: function(elem, i, match, array) {
    return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

确保这段代码是完整的，不然脚本运行到这里会报错，进而引发连锁问题。

2. 处理最常见的$符号冲突 #

很多时候冲突是因为其他JS库（比如Prototype、MooTools）或者另一个jQuery脚本占用了$这个快捷符号。解决方法有两种：

• 方法一：全局替换为jQuery关键字
  在你的搜索栏脚本开头加上jQuery.noConflict()，然后把脚本里所有的$都换成jQuery：

jQuery.noConflict();
jQuery(document).ready(function() {
  jQuery("#search").keyup(function () {
    var searchTerm = jQuery("#search").val();
    var listItem = jQuery('.results tbody').children('tr');
    // 剩下的代码里的$全换成jQuery就行
  });
});

• 方法二：在ready回调里用局部别名
  如果不想全局替换，可以在ready函数里用自定义别名，这样回调函数内部的$还是代表jQuery，不影响外部：

jQuery.noConflict();
jQuery(document).ready(function($) {
  // 这里面随便用$，都是指jQuery
  $("#search").keyup(function () {
    var searchTerm = $("#search").val();
    var listItem = $('.results tbody').children('tr');
    // 正常写代码就好
  });
});

3. 检查是否加载了多个jQuery版本 #

如果页面里同时加载了两个不同版本的jQuery（比如一个1.x版本，一个3.x版本），肯定会出冲突。解决思路：

• 优先删掉其中一个版本，尽量保留较新的那个，除非旧脚本必须依赖旧版本的jQuery特性
• 如果必须保留两个版本，可以用noConflict(true)来分别命名：

// 加载第一个jQuery版本后执行
var oldJQuery = jQuery.noConflict(true);
// 加载第二个jQuery版本后执行
var newJQuery = jQuery.noConflict(true);

// 旧脚本用oldJQuery
oldJQuery(document).ready(function() {
  // 旧脚本的代码
});

// 新脚本用newJQuery
newJQuery(document).ready(function() {
  // 你的搜索栏脚本代码
});

4. 确认脚本加载顺序 #

一定要保证jQuery是第一个加载的脚本，所有依赖jQuery的脚本（包括你的这两个）都要放在jQuery之后加载，比如：

<!-- 先加载核心jQuery库 -->
<script src="jquery.min.js"></script>
<!-- 再加载你的两个业务脚本 -->
<script src="search-bar-script.js"></script>
<script src="other-leaderboard-script.js"></script>

内容的提问来源于stack exchange，提问作者user8023239