1

I have a setup like this:

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

In the line:

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

I am trying to remove everything except the needed child. And this works, But I need something like this:

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

the selector needs to be variable. I have tried both double and single quotes, and it does not seem to work. Putting a constant selector works perfectly. I have even tried consoling out the count variable to see is that is the issue, count variable does what it should.
I can't see anything wrong in here. Any suggestions? Any other selectors perhaps? or some other elegant solution that I can't come up with. Any help is appreciated.

This is my code running [live][1]: When a variable is used, the first one seems to work fine, on second iteration, everything falls apart

This is the full code, it is a little big:

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

I use ajax here to get twitter data:

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

And I get back this response:

    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
4

1 回答 1

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

最初显示所有元素,但随后隐藏除第一个之外的所有元素,然后隐藏除第二个之外的所有元素,但未显示前一个元素,因此在第一次迭代后没有显示任何内容。

于 2013-01-20T22:50:40.167 回答