Question

我是一个完整的jQuery noob。但我需要将它用于与PHP结合的脚本。我们的想法是，人们可以在后端添加新的律师，并将按钮和内容添加到页面中。在网站上，您可以使用下面示例中的按钮循环通过律师。

以下是相关网站以及我希望它如何运作。现在它只是为我的客户提供烟雾和镜子，如果我动态地添加和删除律师，它显然会中断。

这是我的HTML / PHP。有任何想法吗？甚至不知道从哪里开始...

<?php foreach ($team as $lawyer) { ?>
<div id="<?php echo $lawyer->id?>_button" class="lawyer_title_small title-<?php echo $lawyer->title_colour;?>">
    <h2><?php echo $lawyer->name?></h2>
</div>
<?php }?>

<?php foreach ($team as $lawyer) { ?>
<div id="<?php echo $lawyer->id;?>" class="team_info">
    <div class="team_info_left">
        <img src="img/team/<?php echo $lawyer->picture;?>"/>
        <table>
            <tr>
                <th style="color: #9e0039;">TEL:</th>
                <th><?php echo $lawyer->tel;?></th>
            </tr>
            <tr>
                <th style="color: #9e0039;">GSM:</th>
                <th><?php echo $lawyer->gsm;?></th>
            </tr>
            <tr>
                <th style="color: #9e0039;">MAIL:</th>
                <th style="font-size:15px;"><?php echo $lawyer->mail;?></th>
            </tr>
        </table>
    </div>
    <div class="team_info_right">
        <h4>OVER <?php echo $lawyer->name;?></h4>
        <?php echo $lawyer->about;?>
        <h4>VOORKEURKENNIS:</h4>
        <?php echo $lawyer->knowledge;?>
    </div>

</div>
<?php }?>

如果不清楚，我会尝试进一步解释。非常感谢！

Answer 1

更相关的代码是/varlaw/js/main.js中的javascript，尽管看到PHP也很有用。

首先，在PHP中，在包含div的内部构建律师按钮，如下所示：

<div><!-- unstyled structural div -->
    <?php foreach ($team as $lawyer) { ?>
    <div id="<?php echo $lawyer->id?>_button" class="lawyer_title_small title-<?php echo $lawyer->title_colour;?>">
        <h2><?php echo $lawyer->name?></h2>
    </div>
    <?php }?>
</div>

其次，在PHP中构建＆＃34; team_info＆＃34; div包含在div中，如下所示：

<div><!-- unstyled structural div -->
    <?php foreach ($team as $lawyer) { ?>
    <div id="<?php echo $lawyer->id;?>" class="team_info">
        <div class="team_info_left">
            <img src="img/team/<?php echo $lawyer->picture;?>"/>
            <table>
                <tr>
                    <th style="color: #9e0039;">TEL:</th>
                    <th><?php echo $lawyer->tel;?></th>
                </tr>
                <tr>
                    <th style="color: #9e0039;">GSM:</th>
                    <th><?php echo $lawyer->gsm;?></th>
                </tr>
                <tr>
                    <th style="color: #9e0039;">MAIL:</th>
                    <th style="font-size:15px;"><?php echo $lawyer->mail;?></th>
                </tr>
            </table>
        </div>
        <div class="team_info_right">
            <h4>OVER <?php echo $lawyer->name;?></h4>
            <?php echo $lawyer->about;?>
            <h4>VOORKEURKENNIS:</h4>
            <?php echo $lawyer->knowledge;?>
        </div>

    </div>
    <?php }?>
</div>

你现在有两个全等结构div;这些div的相应子元素在其父div中具有相同的索引。这很重要，因为它允许非常简单，高效的javaScript。

第三，在javaScript中用以下代码替换所有$("#marc_button")...，$("#dirk_button")...等代码。

$(".lawyer_title_small").on("click", function() {
    var $this = $(this);
    if ($this.hasClass("lawyer_title_main")) { //this trap may be unnecessary
        return;
    } else {
        //hide all lawyer divs, then selectively show the appropriate lawyer div
        //ie. the div with the same index as the button that was clicked
        $(".team_info").hide().eq($this.index()).show();
    }
});

如果陷阱确实没必要，那么点击处理程序将简化为：

$(".lawyer_title_small").on("click", function() {
    $(".team_info").hide().eq($(this).index()).show();
});

现在，您的PHP可以使用尽可能少的律师来构建页面，javascript将处理它们。

jQuery显示并隐藏PHP生成的内容

1 个答案: