jQuery 代码在 WordPress 中不起作用

Question

我只是想在 WordPress 页面中包含一个简单的 jQuery 脚本。我的一个朋友制作了这个脚本，它在我的浏览器中运行。但是，当我在 WordPress 页面中复制以下代码时，我无法单击这些项目并且它似乎不起作用。但是，JavaScript 正在 WordPress 上运行。

这是代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script> 
var array = []

 $('.productitem').on('click', function() {
  var value = $(this).attr('value');


  if($(this).css('position') == 'relative') {
    $(this).css({'border': '0px solid black',
                 'position': 'static'});
    array = jQuery.grep(array, function(removeValue) {
  return removeValue != value;
    });
  } else {
$(this).css({'border': '1px solid black',
             'position': 'relative'});
array.push(value);
  }

 });

     $('.doorgaan').on('click', function() {
if (array.length == 0) {
    alert('Choose at least 1')
 }else if (array.length == 1) {
    var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0];
    window.location.href = link;
 } else if(array.length == 2) {
    var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0]+', '+array[1];
    window.location.href = link;
 } else if(array.length == 3) {
    var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0]+', '+array[1]+', '+array[2];
    window.location.href = link;
 } else if(array.length > 3) {
    alert("You can only choose 3")
 }
 })

</script>

<img class="productitem alignnone wp-image-578" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/padded-black-front-

219x300.png" alt="padded-black-front" width="130" height="178" value="sportief" />

<img class="productitem alignnone wp-image-457" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/skopje-front-1.png" 

alt="skopje-front (1)" width="130" height="209" value="casual" />

<img class="productitem alignnone wp-image-442" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/estro-black-front.png" 

alt="estro-black-front" width="150" height="161" value="zakelijk" />

<img class="productitem alignnone wp-image-491" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/elias_lichtblauw_voorkant-

1.png" alt="elias_lichtblauw_voorkant (1)" width="150" height="130" value="sportief" />

<img class="productitem alignnone wp-image-479" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/alexis-cardigan-front-1.png" 

alt="alexis-cardigan-front (1)" width="150" height="130" value="sportief" />

<img class="productitem alignnone wp-image-471" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/saint-germain-    sweater-

 front.png" alt="saint-germain-sweater-front" width="150" height="149" value="zakelijk" />

<img class="productitem alignnone wp-image-544" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/russell-side.png" 

alt="russell-side" width="150" height="93" value="casual" />

<img class="productitem alignnone wp-image-588" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/antares-cement-ivy-front.png" 

alt="antares-cement-ivy-front" width="150" height="83" value="sportief" />

<img class="productitem alignnone wp-image-509" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/steve-black-leather-1_1.png" 

alt="steve-black-leather-1_1" width="150" height="74" value="zakelijk" />

<img class="productitem alignnone wp-image-522" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/desertboot_black_right.png" 

alt="desertboot_black_right" width="150" height="82" value="casual" />

<button class="doorgaan">Doorgaan</button>

正如您在此页面上看到的：http://www.project4.ramonkagie.nl/script/ 它什么也没做。我已将它包含在 WordPress HTML 页面编辑器中。我发现我可以使用 wp_enqueue_script，但这似乎包含在 PHP 文件中，我只想将脚本包含到一个简单的 WordPress 页面中。

Answer 1

您的方法存在一些问题。

1. 你不需要包含 jquery 文件，因为你的 wp 设置已经包含了这个库。

2. 如果你想在 jquery 中使用 $ 符号，因为你的设置中使用了默认 jQuery，那么你必须像这样进行类型转换 jQuery（函数（$）{ 你编码 });

3. 您的脚本无法正常工作，因为我认为您已在 wordpress 页面中添加了您的脚本。最好创建一个 js 文件添加代码并将其包含在页脚中。

希望这会对你有所帮助。