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

您的方法存在一些问题。

您不需要包含jquery文件，因为您已经包含此库。
如果你想在jquery中使用$ symbol作为默认的jQuery，那么你必须将它类型化为类似的 jQuery（function（$）{ 你编码 }）;
您的脚本无效，因为我认为您已在wordpress页面中添加了脚本。最好创建一个js文件，添加代码并将其包含在页脚中。

希望这会对你有所帮助。

jQuery代码在WordPress中不起作用

1 个答案: