0

順序付けされていないリストの奇数と偶数のリストアイテムの背景色を変更したいと思います。これは、各リストアイテム内に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>
4

1 に答える 1

0

スクリプトの最後にjavascriptを使用して背景色を設定します。

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

ヘッダーにjqueryをロードしてください：x

于 2012-04-24T23:27:33.457 に答える