调整WordPress的jQuery

时间:2016-12-08 作者:Rafal

我正在努力使这个脚本在Wordpress上工作。在小提琴上,效果很好https://jsfiddle.net/xqxk2qdg/2/ 知道我为什么会有这个问题吗?它已正确排队并加载到页面上。

var array = [];
var array1 = $(\'#input_8_3\').val().split(\',\');
$("#input_8_3").val(array.join());

(function($){
$(\'div.thumbn\').click(function() {
    var text = $(this).attr("id").replace(\'img-act-\',\'\');
  var oldtext = $(\'#input_8_3\').val();
    if ($(this).hasClass(\'chosen-img\'))
  {

    $(\'#input_8_3\').val(text+oldtext);      
    var index = array.indexOf(text);
    if (index !== -1)
    {
        array.splice(index, 1);
    }

    array1.push(text);
    $(this).removeClass(\'chosen-img\');
  }
  else
  {
    array.push(text);
    var index = array1.indexOf(text);
    if (index !== -1)
    {
        array1.splice(index, 1);
    }
    $(this).addClass(\'chosen-img\');
  }
  $("#input_8_3").val(array.join());
  $("#input_8_4").val(array1.join());
  console.log(array1);
});
})(jQuery);

3 个回复
SO网友:depiction

默认情况下,jQuery在WordPress中以无冲突模式运行。您有一个传递jQuery对象的匿名函数,以便您可以使用它。

您的代码将在第二行出错,因为它不知道$是什么。将前三行移到匿名函数中以解决此问题。

(function($){
var array = [];
var array1 = $(\'#input_8_3\').val().split(\',\');
$("#input_8_3").val(array.join());

$(\'div.thumbn\').click(function() {
    var text = $(this).attr("id").replace(\'img-act-\',\'\');
  var oldtext = $(\'#input_8_3\').val();
    if ($(this).hasClass(\'chosen-img\'))
  {

    $(\'#input_8_3\').val(text+oldtext);      
    var index = array.indexOf(text);
    if (index !== -1)
    {
        array.splice(index, 1);
    }

    array1.push(text);
    $(this).removeClass(\'chosen-img\');
  }
  else
  {
    array.push(text);
    var index = array1.indexOf(text);
    if (index !== -1)
    {
        array1.splice(index, 1);
    }
    $(this).addClass(\'chosen-img\');
  }
  $("#input_8_3").val(array.join());
  $("#input_8_4").val(array1.join());
  console.log(array1);
});
})(jQuery);

SO网友:mr__culpepper

Uncaught TypeError: $ is not a function(…)
这是由于WordPress与jQuery的交互。

解决方法是将“$”的实例替换为“jQuery”

SO网友:Schon Garcia

这是我在脚本文件中用于jQuery函数的内容。你的情况应该是这样的。

    $(document).ready(function ($) { ... })