使用javascript函数代替变量

时间:2013-09-14 20:51:28

标签: javascript jquery html function variables

这里我有一个创建侧边栏的代码:

var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>" + '<div class="raty" />' + "</br>";

$(side_bar_html).appendTo('#side_bar').filter('.raty').raty({
    score : place.rating,
    path : 'http://wbotelhos.com/raty/lib/img'
})

如何从此代码创建函数以创建具有函数的侧边栏...

类似的东西:

function Create_a_sidebar_and_put_it_into_ID#sidebar () {
//for every marker to return html string
 return "<div class='element'>"+place.name+"</br>"+place.rating+"</div>" + etc...

Becouse我有一个创建html的问题,我不知道该追加什么,我没有控制它

有可能吗?

1 个答案:

答案 0 :(得分:1)

如果我正确地理解了您的问题,那么您就会问如何使用您的第一个代码块来为某个地方创建评级,并重构它以便您可以随意随意创建侧边栏。这就是我将如何处理这个答案。

正如@Sime Vidas所提到的,您可以从创建侧边栏本身的代码开始,并使其成为如下所示的功能。我已经修改了一下这个函数,以便从href属性中取出javascript(这通常被认为是一种不好的做法),并将html字符串替换为$.fn.init(我发现它已经大幅降低了)使用DOM方法创建元素。您的<br />元素之后也不需要a,因为默认情况下div是块元素。

function createSidebar(place) {
    var $sidebarLink = $(document.createElement('a'));
    var $raty = $(document.createElement('div'));

    $sidebarLink.attr('href', '#').text(place.name).click(function(evt) {
        evt.stopPropagation();
        google.maps.events.trigger(gmarkers[parseInt(gmarkers.length - 1, 10)], 'click');
    });
    $raty.addClass('raty').raty({
        score: place.rating,
        path: 'http://wbotelhos.com/raty/lib/img'
    });
    return $([$sidebarLink, $raty]);
}

现在你可以做像

这样的事情
var $sidebar = $('#side_bar');
places.map(createSidebar).forEach(function($sidebarPart) { 
    $sidebar.append($sidebarPart);
});

很抱歉,如果我回答你的问题,但我认为这就是你所要求的。如果没有随时发表评论,我们可以更多地谈论它!