Javascript JQuery代码无法使用PHP代码来处理Wordpress的帖子和页面插件

我被要求在worpress页面的帖子和页面中使用插件PHP代码。 我想在单击行详细信息后展开它，如本例所示：

我不能用这个插件。单击按钮后，不会展开行详细信息。也许有人熟悉它，可以帮我吗？ 这是我的密码：

<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>';
?>

$（document）.delegate（'input[type=“button”]”，'click'，function（）{
if（$（this）.parents（'tr'）.next（'tr'）.find（'div'）.length==0）{
$（'[colspan=“5”]'）。父（'tr'）。移除（）；
$（this）.parents（'tr'）.after（''）.next（）.append（''）.children（'td'）.append（''）.children（）.css（'background'，'#f0f0'）.html（$（$（this）.data（'href'）.html（））；
}否则{
$（'[colspan=“5”]'）。父（'tr'）。移除（）；
}
});
#内容1，
#内容二,，
#内容3{
显示：无；
}
桌子{
表布局：固定；
宽度：100%；
边界塌陷：塌陷；
}
运输署{
边框：1px实心#000；
填充物：5px；
垂直对齐：顶部；
}

您的代码依赖于jQuery。你必须确保这是包括在内的。您还应该将它包装在jQuery

ready

函数中，就像

$（document）.ready（function（）{…代码的其余部分）

另外，我认为wordpress使用了

jQuery

而不是

$

，因此您必须包装它，然后在

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();
        }
    });
});

jQuery（文档）.ready（函数（$）{
$（document）.delegate（'input[type=“button”]”，'click'，函数（）{
if（$（this）.parents（'tr'）。next（'tr'）。find（'div'）。length==0）{
$（'[colspan=“5”]'）。父（'tr'）。移除（）；
$（this）.parents（'tr'）.after（''）.next（）.append（''）.children（'td'）.append（''）.children（）.css（'background'，'#f0f0'）.html（$（$（this）.data（'href'）.html（））；
}否则{
$（'[colspan=“5”]'）。父（'tr'）。移除（）；
}
});
});

是的，您需要$（window）.ready（）函数，但我不确定为什么您有这么多无关的代码？您可以使用下面的代码，它具有相同的效果，但效率更高

$(window).ready( function() {

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

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

    $(DOMtag).toggle();

}); 

}))
 您是否在jquery之前检查了JavaScript文件是否已加载？使用WordPress的内置函数wp_enqueue_script（）`加载脚本有一种合适的方法。你指的是什么JavaScript文件？我需要的所有代码都放在这里。所有这些代码都在你的模板文件中吗？这些代码正在工作！！但具体情况如下表所示。如何显示对应行下面的详细信息？您需要将实际的div嵌套在原始表中——而不是使它们成为div，我将使它们成为表行（trs）并将href标记添加到这些trs中。最终产品将是一个带有隐藏行的大表，这些隐藏行显示在事件fire上。