Question

我有这样的设置：

var count = 1;

function displayPoint(marker, index){
    $("#message").hide();

    var position = $($.goMap.mapId).data(marker).position;
    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);

                    //console.log(count);
                    //console.log("li:not(:nth-child("+count+"))")
                        $("#message")
                            .fadeIn()
                            .css({ top:markerOffset.y, left:markerOffset.x })        
                            .children("li:not(:nth-child("+count+"))")
                            .hide();        
}

在行中：

$("#message")
    .children("li:not(:nth-child(6))")
    .hide();

我正在尝试删除除了所需孩子之外的所有内容。这有效，但我需要这样的东西：

.children("li:not(:nth-child("+count+"))")

选择器需要是可变的。我尝试了双引号和单引号，但它似乎不起作用。使常量选择器完美运行。我甚至尝试安慰count变量以查看问题是什么，count变量应该做什么。
我在这里看不出任何错误。有什么建议？还是其他任何选择者？或其他一些我无法想出的优雅解决方案。任何帮助表示赞赏。

这是我的代码[live] [1]：当使用变量时，第一个似乎工作正常，在第二次迭代时，一切都崩溃了

这是完整的代码，它有点大：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>sideBar and create own infowindow / goMap</title> 



 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gomap-1.3.2.min.js"></script> 


<script type="text/javascript" charset="utf-8">

            $(document).ready(function(){
                var c = 0;
                var count = 1;

                $("#map").goMap({
                    address :'San Francisco, CA',
                    zoom:9,
                    maptype: 'ROADMAP',
                    navigationControl: false,
                    scrollwheel: false,
                    mapTypeControl: false
                });


                setTimeout(function() {
                            // marker points
                var markers = [{  
                            address :'San Francisco, CA',
                            icon: 'img/pixel.png',
                        },{ 
                            address :'Sacramento, CA',
                            icon: 'img/pixel.png',                          
                        },{ 
                            address :'Berkeley, CA',    
                            icon: 'img/pixel.png',
                        },{ 
                            address :'Santa Rosa, CA',      
                            icon: 'img/pixel.png',
                        },{ 
                            address :'Palo Alto, CA',       
                            icon: 'img/pixel.png',
                        },{ 
                            address :'San Jose, CA',        
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Fremont, CA',     
                            icon: 'img/pixel.png',              
                        },{ 
                            address :'New York City,NY',        
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Philadelphia,PA',     
                            icon: 'img/pixel.png',  
                        },{ 
                            address :'Newark,NJ',       
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Trenton,NJ',      
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Washington,DC',       
                            icon: 'img/pixel.png',  
                        },{ 
                            address :'Baltimore,MD',        
                            icon: 'img/pixel.png',                              
                        }];


                    //set markers
                    for (var i = 0; i < 13; i++) {
                        $.goMap.createMarker(markers[i]);
                    }


                overlay = $.goMap.overlay;

                //  move through set points ( markers)
                    setInterval(function() {
                        if (c>12) c=0;
                        marker = $.goMap.markers[c];
                        displayPoint(marker, c);
                        c = c+1;    
                    },5000);

                    $("#message").appendTo(overlay.getPanes().floatPane);


                    $.post('tweetlist.php', function(response) {
                                        $("#message")
                                            .append(response)
                                            .hide();
                                    });


                    function displayPoint(marker, index){                                                           


                        var position = $($.goMap.mapId).data(marker).position;                      
                        var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);

                        //console.log(count);
                        console.log("li:not(:nth-child("+count+"))")
                            $("#message")
                                .fadeIn()
                                .css({ top:markerOffset.y, left:markerOffset.x })        
                                .children("li:not(:nth-child("+count+"))")
                                .hide();

                            $.goMap.map.panTo(position);
                            count = count +1;       
                    }

                },500);
            });
</script>
<style type="text/css" media="screen">
            #map { width:900px; height:500px; }
            #message {
                                        position:absolute;
                                        background:#555; 
                                        color:#fff;
                                        font-size:12px;
                                        width:300px;
                                        padding: 10px;
                                    }
            #twitter_container a{
                                        color:#0066CC;
                                        font-weight:bold;
                                        }   
            .twitter_status{
                                height:60px;
                                padding:6px;
                                border-bottom:solid 1px #DEDEDE;
                                }       
            .twitter_image{
                                float:left;
                                margin-right:14px;
                                margin-bottom:10px;
                                border:solid 2px #DEDEDE;
                                width:50px;
                                height:50px;
                                }                       
</style>
</head> 
<body> 
<div id="wrap">
    <div id="header">

    </div>
    <div id="content">

        <div id="map"></div>
        <ul id="message"></ul>
        <div id="footer"></div>
    </div>
</div> 
</body> 
</html>

我在这里使用ajax来获取推特数据：

                 $.post('tweetlist.php', function(response) {
                                    $("#message")
                                        .append(response)
                                        .hide();
                                });

我回复了这个回复：

    foreach ($json->results as $tweet )

{   
    $text = $tweet->text;
    $user = $tweet->from_user_name;
    $profile_image_url = $tweet->profile_image_url;
    echo "<li>";
    echo "<img src=".$profile_image_url." class = 'twitter_image' >";
    echo "<a href='http://www.twitter.com/".$user."'>".$user."</a>:";
    echo "<div class = 'twitter_status'>".$text."</div>";   
    echo "</li>";
}
  [1]: http://servernomics.com/map.html

Answer 1

使用以下displayPoint功能：

function displayPoint(marker, index) {
    var position = $($.goMap.mapId).data(marker).position;
    var overlay = $.goMap.overlay;
    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);

    $.goMap.map.panTo(position);
    $("#message")
            .fadeIn()
            .css({ top: markerOffset.y, left: markerOffset.x });
    $("li", "#message").hide();
    $("li:nth-child(" + count + ")").show();
    count = count + 1;
}

最初显示所有元素，但是你隐藏了除第一个之外的所有元素，然后你隐藏了除了第二个 BUT 之外的所有元素，你没有显示之前的所有元素，所以在第一次迭代后没有显示任何内容。

Jquery选择器：n-child

1 个答案: