Question

我想在我的无序列表中替换奇数和偶数列表项的背景颜色。这很好用，直到我在每个列表项中添加了javascript。如果我删除了javascript，背景颜色会交替显示。使用javascript，我可以在firebug中看到每个列表项看起来都是偶数。

我需要在每个列表项中包含javascript的原因是因为我动态显示数据库中的每个列表项，并根据应用程序ID（$ apid）分配类。

我的css用于替换列表项的背景颜色：

ul.version li:nth-child(odd) {
background: #EEE;
}

ul.version li:nth-child(even) {
background: #FFF;
}

我的php页面中适用的代码：

<ul class="version">

                                <li class="versionheader">

                                    <ul>
                                        <li class="appname">
                                            Application
                                        </li>

                                        <li class="appvidlink">
                                            Video
                                        </li>

                                        <li class="appwish">
                                            Wishlist
                                        </li>

                                        <li class="appimplement">
                                            Implemented
                                        </li>
                                    </ul>



                                </li>



                            <?php
                            //get child applications
                            $application_id_result = mysql_query("SELECT apid from products_app_categories WHERE cid = '$catid'");
                                while($application_id_row = mysql_fetch_array($application_id_result)) {

                                    $apid = $application_id_row['apid'];



                            //see if user already has app in their wishlist
                            $application_wished_result = mysql_query("SELECT COUNT(apid) FROM products_wishlist_users WHERE apid = '$apid' AND uid = '$uid'");
                                while($application_wished_row = mysql_fetch_array($application_wished_result)) {




                                    if($application_wished_row['COUNT(apid)'] < 1) {

                                        $appwished = false;
                                    } else {
                                        $appwished = true;
                                    }



                            $application_result = mysql_query("SELECT * FROM products WHERE child = '1' AND parent_id = '$pid' AND id = '$apid'");
                                while($application_row = mysql_fetch_array($application_result)) {

                                    $apname = $application_row['name'];

                                    ?>


                                    <li class="app app_<?php echo $apid; ?> <?php if($appwished) { echo 'appwished'; } ?>">

                                        <ul>
                                            <li class="appname">
                                                <?php echo $apname; ?>
                                            </li>

                                            <li class="appvidlink">
                                                [video]
                                            </li>

                                            <li class="appwish">
                                                <?php if(!$appwished) {
                                                    echo '<a class="btn addtowishlist addtowishlist_' . $apid . '">Add</a>';
                                                } else {
                                                    echo '<span class="checkmark"></span>';
                                                } ?>
                                            </li>

                                            <li class="appimplement">
                                                <?php if(!$implemented) {
                                                    echo '<a class="btn addtoimplemented">Yes</a>';
                                                } else {
                                                    echo '<span class="checkmark"></span>';
                                                } ?>
                                            </li>
                                        </ul>



                                    </li>



                                    <script type="text/javascript">

                                        $('.addtowishlist_<?php echo $apid; ?>').click(function(){

                                            $.get("wishlist/wishlistupdate.php?uid=<?php echo $uid; ?>&apid=<?php echo $apid; ?>");

                                            $("#wishlistapps").load("wishlist/wishlistdisplay.php?uid=<?php echo $uid; ?>");


                                            $("li.app_<?php echo $apid; ?>").addClass("appwished");

                                            return false;
                                        });


                                    </script>





                                <?php   
                                } } }?>

                        </ul>

Answer 1

在脚本末尾用javascript设置背景颜色。

$('ul.version li:even').css('background-color','#EEE');
$('ul.version li:odd').css('background-color','#FFF');

确保在header：x

中加载jquery

尝试为奇数和偶数<li>交替背景颜色，但javascript使所有偶数</li>

1 个答案: