Question

我正在开发一个“排行榜”系统，我有2个jQuery脚本似乎彼此冲突。我没有写它们我有一个老伙伴为我写了这些，我对js / jQuery不太熟悉。

这是一个搜索栏脚本，其中一个冲突：

$(document).ready(function() {

  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
  $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
  });
    
  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });

  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });

  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');

  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
		  });
});

这是另一个与搜索栏脚本冲突的脚本，这个脚本用于分页：

  jQuery(document).ready(function($){

    $('.table tbody').paginathing({
      perPage: 25,
      limitPagination: 5,
      insertAfter: '.table',
      pageNumbers: true
    });
  });

我想要完成的是如何合并它们或使它们在一起如何协同工作。

Answer 1

您可以尝试将第一个脚本放在第二个脚本的相同模式中。两个脚本都使用jquery，但第二个脚本准备避免与其他库冲突。查看此文章了解更多详细信息： https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

更新：

使用第二个脚本的第一行更新您发布的第一个脚本的第一行。像这样：

jQuery(document).ready(function($){
  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

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

  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });

  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });

  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');

  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
          });
});

更新2

似乎你在页面上加载了两次bootstrap，第一个在jquery之前声明了。这就是错误发生的原因。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

我认为你可以摆脱3.3.5版本，然后在引导程序3.3.7之前放入jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

JS / jQuery冲突

1 个答案: