Question

我是Wordpress和Jquery的新手。这是我的问题。需要在我的wp页面中创建一个简单的功率计算器，方法是选中带有checkerbox的house hold项目。选定的检查框值总结，应该在运行中显示！这是我的整个代码按建议更改（$ = jQuery.noConflict（）;）仍然无法正常工作：（

         <head>
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$=jQuery.noConflict();
$(document).ready(function () {

function sumRows() {
    var sum = 0,
        total = $('#total');
    $('tr').each(function () {
        var amount = $(this).find('input[name="amount"]'),
            checkbox = $(this).find('input[name="include"]');
        if (checkbox.is(':checked') && amount.val().length > 0) {
            sum += parseInt(amount.val(), 10);
        }
    });
    total.text(sum);
 }

 // calculate sum anytime checkbox is checked or amount is changed
 $('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);

 });

      </script>



  </head>

 <body>

        <div id="total" style="color:red">0</div>
          <table>
  <tr>
    <td><input type="text" value="0" size="6" name="amount"></td>
    <td>
        <input name="include" type="checkbox">
    </td>
   </tr>

    <tr>
     <td><input type="text" value="0" size="6" name="amount"></td>
        <td>
                  <input name="include" type="checkbox">
                </td>
         </tr>
            <tr>
           <td><input type="text" value="0" size="6" name="amount"></td>
        <td>
        <input type="checkbox" name="include">
    </td>
                     </tr>
    </table>
     </html>

提前致谢！

Answer 1

您无法在Wordpress插件中使用jQuery便捷功能$()。您必须使用jQuery()或jQuery.noConflict()来避免jQuery和Wordpress之间的冲突。

所以：

 jQuery(document).ready(function () {

   function sumRows() {
    var sum = 0,
        total = jQuery('#total');
    jQuery('tr').each(function () {
        var amount = jQuery(this).find('input[name="amount"]'),
            checkbox = jQuery(this).find('input[name="include"]');
        if (checkbox.is(':checked') && amount.val().length > 0) {
            sum += parseInt(amount.val(), 10);
        }
    });
    total.text(sum);
}

   // calculate sum anytime checkbox is checked or amount is changed
   jQuery('input[name="amount"], input[name="include"]').on('change keyup blur',   sumRows);

});

或使用jQuery.noConflict()：

$j=jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
...
});

Answer 2

Wordpress已经包含了jquery的副本，只需将代码的开头更改为：

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

   function sumRows() {
    var sum = 0,
        total = $('#total');
    $('tr').each(function () {
        var amount = $(this).find('input[name="amount"]'),
            checkbox = $(this).find('input[name="include"]');
        if (checkbox.is(':checked') && amount.val().length > 0) {
            sum += parseInt(amount.val(), 10);
        }
    });
    total.text(sum);
}

   // calculate sum anytime checkbox is checked or amount is changed
   $('input[name="amount"], input[name="include"]').on('change keyup blur',   sumRows);

});

现在它应该工作;）

Answer 3

还有更多方法可以做到这一点（它是已经给出答案的摘要）：

作为theblackgigant回答，你可以：

jQuery(document).ready(function ($) {
  // you can code with "$" here: $('.someClass')
  ...
});

如vard评论Irvin Dominins的回答，你可以给我们一个自动执行匿名函数：

(function($) { 
  // you can code with "$" here: $('.someClass')
  $(document).on('ready', function () {
    ...
  });
})(jQuery);

或者您可以使用“jQuery（）”而不是“$（）”或使用.noConflict（），Irvin Dominin回答：

jQuery(document).ready(function () {
  // you can code with "jQuery" here: jQuery('.someClass')
  jQuery(document).on('ready', function () {
    ...
  });
});

$j=jQuery.noConflict();

// you can code with "$j" here: $j('.someClass')
$j(document).on('ready', function () {
  ...
});

我通常喜欢自我执行功能，因为如果代码执行需要在文档“准备好”之前完成，那么这里很容易做到。并且您可以使用$使代码易于在项目之间或从其他jquery相关源中复制。

也可以将.noConflict（）（这是jquery devs的首选方法）方法与selfexecuting函数source结合使用：

jQuery_noConflict = jQuery.noConflict();

(function($){
  // you can code with "$" here: $('.someClass')
  $(document).on('ready', function () {
    ...
  });

})(jQuery_noConflict);

Jquery无法在我的wordpress页面中工作

3 个答案: