开发者

Applying style to li generated in loop of function

@nrabinowitz

I am now wondering how to get the map icon when clicked to apply a style to the LI that is created in the previous section. Is that possible? I attempted below in the code but does not work.

function(I) {
    // within the scope of this function,
    // "thismarker" will work as expected
    var listid = I + 1;
    $("<li id="+I+"/>")
        .html('<span class="leadId">' + listid + '</span>' + '<div class="leadDataWrapper"><div class="leadName">' + data[I][3] + ' ' + data[I][4] + '</div><div class="leadDate">' + data[I][2] + '</div></div><div class="leadType"><img src="/images/map-' + data[I][1].toLowerCase() + '.png"></div>')
        .click(function(){
            infowindow.close();
            infowindow.setContent(contentString[I]);
            map.setCenter(markers[I].position);
            infowindow.open(map, markers[I]);

        })
        .appendTo("#leadsList ul");  
    google.maps.event.addLi开发者_C百科stener(marker, "click", function(e){
        infowindow.close();
        infowindow.setContent(contentString[I]);
        infowindow.open(map, markers[I]);
        $("#leadsList li #"+I).css({"background-color":"#666666"});
    });
})(I);


The id of any dom element cannot be an integer, it should always start with alpha or special character. Try this

function(I) {
    // within the scope of this function,
    // "thismarker" will work as expected
    var listid = I + 1;
    $("<li id='_"+I+"'/>")
        .html('<span class="leadId">' + listid + '</span>' + '<div class="leadDataWrapper"><div class="leadName">' + data[I][3] + ' ' + data[I][4] + '</div><div class="leadDate">' + data[I][2] + '</div></div><div class="leadType"><img src="/images/map-' + data[I][1].toLowerCase() + '.png"></div>')
        .click(function(){
            infowindow.close();
            infowindow.setContent(contentString[I]);
            map.setCenter(markers[I].position);
            infowindow.open(map, markers[I]);

        })
        .appendTo("#leadsList ul");  
    google.maps.event.addListener(marker, "click", function(e){
        infowindow.close();
        infowindow.setContent(contentString[I]);
        infowindow.open(map, markers[I]);
        $("#leadsList li #_"+I).css({"background-color":"#666666"});
    });
})(I);


You have a space between li and #I. That effectively means, get me the element that is a descendant of an li and has an id of I. Remove the space to correct it to be the li with an id of I:

$("#leadsList li#"+I).css({"background-color":"#666666"});

But you don't need most of that selector anyway. Just reference the id - unless you have a special case.

$("#"+I).css({"background-color":"#666666"});


You're missing quotes in some of your selectors.

Instead of $("<li id="+I+"/>"), try: $('<li id="' + I + '" />').

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜