无法让我的脚本在我的网站上工作-我做错了什么？

时间：2018-01-30 作者：Mason J

I have some javascript here that seems to run fine as a snippet, but I am having a hard time trying to get it to work on my website. I\'ve tried many plug-ins to no avail.

My question is; can someone help me upload this javascript to my website? The page I want it to work on is https://cruxstickers.com/zztest .

Thanks for any and all help!

$("#product-details-continue").click(function() {

  var addr = "https://cruxstickers.com/product/" +
      $("input[type=radio][name=variant_id]:checked").val() + "-" +
      $("input[type=radio][name=quantity]:checked").val();

  alert(addr);

  // change the addr to relevant URLs and do this instead...
  // location.href = addr;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="variant-options" class="options">
<li><input type="radio" id="variant_79" name="variant_id" value="2x2" readonly=""><label for="variant_79"> 2" x 2"</label></li>
<li><input type="radio" id="variant_78" name="variant_id" value="3x3"><label for="variant_78"> 3" x 3"</label></li>
</ul>

<div id="quantities" class="product-option-group">
<legend>Select a quantity</legend>
<ul id="variant-quantities" class=" options radio"><li class="checked quantity-item"><span class="table-cell"><input type="radio" id="quantity_50" readonly="" name="quantity" value="50">
<label for="quantity_50" class="checked quantity"> 50</label></span></li>

<li class=" quantity-item"><span class="table-cell"><input type="radio" id="quantity_100" readonly="" name="quantity" value="100"><label for="quantity_100" class=" quantity"> 100</label></span></li>
<li class=" quantity-item"><span class="table-cell"><input type="radio" id="quantity_200" readonly="" name="quantity" value="200"><label for="quantity_200" class=" quantity"> 200</label></span></li>

</ul>
</div>

<button id="product-details-continue">continue</button>

Below is my final javascript solution. I\'ve added this to my wordpress themes functions.php file.

add_action(\'wp_footer\',function(){
    ?>
    <script>
jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;


    var vrnt = jQuery("input[name=variant_id]:checked").val();
    var qnty = jQuery("input[name=quantity]:checked").val();

    var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

    window.location.assign(addr);

    return false;
  });
});
    </script>
    <?php
});

1 个回复

最合适的回答,由SO网友:David Sword 整理而成

首先，JS是错误的：

在您网站上的浏览器开发人员/Web检查器>控制台中，我键入$() “未定义”。然后我做到了jQuery(), 它显示一个值，所以它被定义了。所以你应该使用jQuery(, 不$( 自始至终

旁注：我看到“继续”按钮只是一个<button> 元素，不在<form>, 但如果会的话.click() 您需要阻止默认的按钮单击操作。您可以通过以下方式执行此操作：

yourButton.click(function(e){
  e.preventDefault;
  // your code
  return false; 
});

因此，我可以通过控制台点击按钮启动，使用以下功能：

jQuery("#product-details-continue").click(function(e) {
  e.preventDefault;
  alert(\'\');
});

没有必要，但您可能还需要考虑将jQuery包装到ready 为了确保DOM已完全加载，

jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;

    // your code
    alert(\'\');

    return false;
  });
});

添加您的代码后，我可以通过控制台获得带有输入值的URL弹出窗口，其中包括：

jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;


    var vrnt = jQuery("input[name=variant_id]:checked").val();
    var qnty = jQuery("input[name=quantity]:checked").val();

    var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

    alert(addr);

    return false;
  });
});

<小时>

其次，要将其纳入你的网站，在你的主题功能中。php文件，或在插件主目录中。php文件—无论您在何处开发—您都可以添加以下内容，将JS代码注入到站点的页脚中：

add_action(\'wp_footer\',function(){
    ?>
    <script>
    jQuery(document).ready(function() {
      jQuery("#product-details-continue").click(function(e) {
        e.preventDefault;

        var vrnt = jQuery("input[name=variant_id]:checked").val();
        var qnty = jQuery("input[name=quantity]:checked").val();

        var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

        alert(addr);

        return false;
      });
    });
    </script>
    <?php
});

最后，您为HTML粘贴了一个脚本标记https://ajax.googleapis..../jquery.min.js 但你不需要这样，而且它不起作用。如果您浏览源代码，您将看到

<script type="text/javascript" src="https://cruxstickers.com/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>

这就是为什么jQueryno-conflict mode jQuery() 正在工作。如果要使用外部脚本，应使用wp_enqueue_script().

结束

小码农CODE

无法让我的脚本在我的网站上工作-我做错了什么？

相关推荐

不只包括在主页上的JavaScript文件