私はこのような設定をしています：
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]を実行している私のコードです。変数を使用すると、最初の変数は正常に機能しているように見えます。2回目の反復では、すべてがバラバラになります。
これは完全なコードです、それは少し大きいです：
<!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を使用してTwitterデータを取得します。
$.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