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

Question

I am a total jQuery noob. But I need to use it for a script in combination with PHP. The idea is that people can add a new lawyer on the backend and that a button and content are added to the page. On the site you would then be able to cycle through the lawyers by using the buttons as in the example below.

http://strak-design.com/varlaw/team

Here is the site in question and how I would like it to work. Right now it's simply smoke and mirrors for my clients and if I add and remove lawyers dynamically it obviously breaks.

Here's my HTML/PHP. Any ideas? In don't even know where to start...

<?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 }?>

If it isn't clear, I'll try to explain further. Thanks a lot!

Answer 1

The more relevant code is the javascript in /varlaw/js/main.js, though it is also useful to have seen the PHP.

First, in PHP, build the lawyer buttons inside a containing div as follows :

<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>

Second, in PHP build the "team_info" divs inside a containing div as follows :

<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>

You now have two congruent structural divs; corresponding child elements of these divs have the same index within their parent div. This is important as it allows for very simple, efficient javaScript.

Third, in javaScript replace all the $("#marc_button")..., $("#dirk_button")... etc. code with :

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

If the trap is indeed unnecessary, then the click handler will simplify to :

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

Now, your PHP can build the page with as few or as many Lawyers as it likes and the javascript will handle them.