使用适用于Wordpress的Posts and Pages插件的PHP Code的JQuery代码不起作用

Question

我被要求在worpress页面中使用插件PHP Code for Posts and Pages。 我希望在单击后像下面的示例一样展开行详细信息： http : //jsfiddle.net/ardeezstyle/4FKCa/1/

我不能使用插件来做到这一点。 单击按钮后，行详细信息不会展开。 也许有人熟悉它并可以帮助我？ 这是我的代码：

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
$(document).delegate('input[type="button"]','click',function(){
if($(this).parents('tr').next('tr').find('div').length==0){
    $('[colspan="5"]').parent('tr').remove();
    $(this).parents('tr').after('<tr/>').next().append('<td          colspan="5"/>').children('td').append('<div/>').children().css('background','#f0f0f0').html($($(this).data('href')).html());
}else{
    $('[colspan="5"]').parent('tr').remove();
}
});
</script>

<style type="text/css">
    #content1,
    #content2,
    #content3 {
        display: none;
    }
    table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px solid #000; 
        padding: 5px; 
        vertical-align: top;
    }
</style>

<?php

echo '
<table summary="test" cellspacing="0" id="master">
<colgroup>
    <col width="40px">
    <col span="4" width="25%">
</colgroup>

<thead>
<tr>
 <th>&nbsp;</th>
 <th><span>Customer</span></th>
 <th><span>OrderID</span></th>
 <th><span>Order date</span></th>
 <th><span>Order Total</span></th>
</tr>
</thead>

<tbody>
<tr>
    <td><input type="button" name="" value=" " data-href="#content1" ></td>
    <td>Ernst Handel</td><td>10258</td><td>07/17/1996</td><td>$403.72</td>
</tr>

<tr>
    <td><input type="button" name="" value=" " data-href="#content2"></td>
    <td>Wartian Herkku</td><td>10270</td><td>08/01/1996</td><td>$1,376.00</td>
</tr>

<tr>
    <td><input type="button" name="" value=" " data-href="#content3"></td>
    <td>Magazzini Alimentari Riuniti</td><td>10275</td><td>08/07/1996</td>            <td>$15.36</td>
</tr>

</tbody>
</table>

<div id="content1">
<h2>content for row 1</h2>
<table>
<thead>
    <tr>
        <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis             egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris     placerat eleifend leo.</p>
</div><!-- content1 -->

<div id="content2">
<h2>content for row 2</h2>
<table>
<thead>
    <tr>
        <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris     placerat eleifend leo.</p>
</div><!-- content2 -->
<div id="content3">
<h2>content for row 3</h2>
<table>
<thead>
    <tr>
        <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris     placerat eleifend leo.</p>
</div>';
?>

Answer 1

您的代码依赖jQuery。 您必须确保将其包括在内。 另外，您还应该将其包装在jQuery ready函数中，例如$(document).ready(function(){...rest of your code另外，我认为wordpress使用jQuery而不是$因此您必须将其包装然后再给它dollar在ready匿名功能中。

jQuery(document).ready(function ($) {
    $(document).delegate('input[type="button"]', 'click', function () {
        if ($(this).parents('tr').next('tr').find('div').length === 0) {
            $('[colspan="5"]').parent('tr').remove();
            $(this).parents('tr').after('<tr/>').next().append('<td colspan="5"/>').children('td').append('<div/>').children().css('background', '#f0f0f0').html($($(this).data('href')).html());
        } else {
            $('[colspan="5"]').parent('tr').remove();
        }
    });
});

http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Answer 2

是的，您将需要$（window）.ready（）函数，但是我不确定为什么要拥有所有这些无关的代码？ 您可以只使用以下效果相同的方法，但是效率更高。

$(window).ready( function() {

$(document).on('click', 'input[type="button"]', function() {

    var DOMtag = $(this).data('href');

    $(DOMtag).toggle();

}); 

}）;