jQuery 添加到 WordPress 站点时将不起作用

Question

我有以下 jQuery 代码：

$('#found-result').hide();
$('#found-no-result').hide();
$('.colors-li').hide();
$('#search-mod').click(function(){
  var searchCriteria = $('#search-criteria').val().toUpperCase();
  var isFound = false; // Display "Success or Failure"
  $('.colors-list').each(function(){
     var tagA = $(this).find('.colors-li-a')[0];
     var Value = $(tagA).text().toUpperCase();
     var isMached = Value == searchCriteria || searchCriteria == "";
     $(this).toggle(isMached);
     
     
     if(isMached) isFound = true; // Display "Success or Failure"
  }); 

   $("#result-success").html(isFound ? $("#found-result").show() : $("#found-no-result").show()); 
  
});

它出现在 WordPress 页面上，并带有一个由 HTML 制成的搜索框，它允许用户搜索颜色并在颜色可用时做出响应。

我试图通过将其添加到我的函数中来将脚本添加到站点。php

function jquery_load_scripts() {
    wp_enqueue_script( 'jquery' );

    wp_register_script( 'color-check', '/js/colorcheck.js');
    wp_enqueue_script( 'color-check' );
    
}    
add_action('wp_enqueue_scripts', 'jquery_load_scripts');

如果我将 go 放到使用它的页面上并使用搜索控制台，我可以看到脚本已加载到顶部，但脚本根本不起作用。 我一直在 JSFiddle 中开发它，它工作正常。

任何帮助，将不胜感激。

Answer 1

将您的 $( 语句替换为完整的 jQuery(

例如

$('#found-result').hide();
$('#found-no-result').hide();
$('.colors-li').hide();
$('#search-mod').click(function(){

变成：

jQuery('#found-result').hide();
jQuery('#found-no-result').hide();
jQuery('.colors-li').hide();
jQuery('#search-mod').click(function(){ 

ETC