javascript - Jquery 插件 tinysort 不工作，不知道为什么

Question

这是 live site我在胡闹。

每张图片上的数字是通过 get_field() 使用 php 调用的。 (我正在使用插件“高级自定义字段”创建一个字段，在创建帖子时我在其中输入一个数字，在这种情况下它是蛋白质数量。然后我用 php 调用它以便它显示在图片顶部，如下所示:

<?php
$protein = get_field('grams_of_protein');
?>

<div class="portfoliooverlay"><a href="<?php the_permalink(); ?>"><span class="jrm-protein"><?php echo "$protein"; ?></span></a></div>

我添加了一个 .jrm-protein 的 span 类，这样我就可以定位页面上所有可见帖子的 span，因为它们都具有相同的 html 结构并且都包含 .jrm-protein。

我正在尝试使用 jquery 插件 TinySort

站点侧边栏中标有“排序”的按钮具有以下 JS:

jQuery(document).ready(function() {

jQuery('#sorting-button').click(function() {
        jQuery('.jrm-protein').tsort();
    });
});

有人可以看一下该网站，并找出它无法正常工作的原因吗？

我没有注册插件脚本，只是像这样在我的 functions.php 中排队

wp_enqueue_script( 'jrm-custom-tinysortjs', get_template_directory_uri() . '/js/jrmcustomtinysort.js', array('jquery'), false );
wp_enqueue_script( 'jrm-customjs', get_template_directory_uri() . '/js/jrmcustom.js', array('jquery'), false );

附带说明一下，我向整个页面添加了一个叠加层，当单击按钮时会切换，只是为了确保并向您展示 JS 文件正在运行。或者至少第二个是。

============================================= ==================================

更新:我在底部添加了一个带有一堆 span 的 div，它可以与这些 span 一起使用，所以我想问题是我怎样才能让它在不同的容器中工作？应该只是一个选择器问题(但不确定如何去做)

Answer 1

我不打算调试您的整个网站，但我会帮助解决我看到的第一个错误:

未捕获的类型错误:无法调用 null 的方法“getElementsByTagName”

var container = document.getElementById( 'site-navigation' ),
    button    = container.getElementsByTagName( 'h1' )[0],
    menu      = container.getElementsByTagName( 'ul' )[0];

您将容器设置为单个元素，而不是 document 对象。将其他两行的 container 更改为 document 或更改

var container = document.getElementById( 'site-navigation' ),

到

var container = document,