集成javascript對象與jquery

我有這個js對象我從PHP打通jason_encode（）。該對象有2個對象，名稱和視頻。然後通過for循環將名稱分配給div。我的問題是我需要在每個div中創建一個鏈接，創建一個顯示視頻的對話框。集成javascript對象與jquery

我立足這個想法從jQuery UI例如：http://jqueryui.com/demos/droppable/#photo-manager

具體視圖大小圖標我打算具有相同的對話框除了嵌入YouTube視頻。

下面是從JScript的對象獲取的值，並把它們的div代碼。

for (var i in BodyWeight) 
{ 
    if(BodyWeight[i]['Color'] == 'Red') 
    { 
    $('#redboxes').append('<div class="ui-widget-content dragred"><p>' + BodyWeight[i]["ExerciseTitle"] + '</p> </div>'); 
    } 
    else if(BodyWeight[i]['Color'] == 'Blue') 
    { 
    $('#blueboxes').append('<div class="ui-widget-content dragblue"><p>' + BodyWeight[i]["ExerciseTitle"] + '</p> </div>'); 
    } 
}

然後基本上我會有一個圖標，每個圖標都應該有來自ExerciseVideo的數據。我只是無法弄清楚如何將兩個對象連接在一起。在jquery示例中，他們將圖片url嵌入到href中，但不幸的是，我無法對視頻執行相同的操作。

來源

2010-02-07 mike

這尚未經過測試，但它可能工作。 編輯：它實際上已經過測試，現在可以工作。請注意，這裏假設Video是YouTube視頻ID，而不是YouTube視頻網址。（即我們假設Video是在YouTube網址的?v=後的部分）

for(var i=0;i<BodyWeight.length;i++) { 
    var exercise=BodyWeight[i]; 
    var elem=$('<div class="ui-widget-content"><p>'+exercise["ExerciseTitle"]+'</p></div>'); 
    elem.addClass("drag"+exercise['Color'].toLowerCase()); 
    elem.appendTo("#"+exercise['Color'].toLowerCase()+"boxes"); 
    elem.data("exercise", exercise); 
    elem.click(function() { 
     var exercise=$(this).data("exercise"); 
     var div=$("<div>"); 
     var obj=$("<object>"); 
     obj.attr("type", "application/x-shockwave-flash"); 
     obj.attr("data", "http://www.youtube.com/v/"+exercise["Video"]); 
     obj.attr("width", "400").attr("height", "300"); 
     obj.appendTo(div); 
     div.hide().appendTo("body"); 
     setTimeout(function() { 
      div.dialog({ 
       title: exercise["ExerciseTitle"], 
       width: 435, 
       modal: true, 
       close: function(event, ui) { 
        div.remove(); 
       } 
      }); 
     }, 1); 
     return false; 
    }); 
}

來源

2010-02-07 01:02:36 icktoofay

我使用此代碼得到它的工作得到真正的戰鬥。問題是jquery抑制錯誤，我認爲我很難調試它。這似乎沒有做任何事情，直到點擊事件執行，然後開始追加？ – mike

正如我的理解是，你想要的東西，基於JSON數據附加的div，當你點擊了DIV，它在一個對話框中打開了視頻。如果那不是你想要的，你能改述你想做什麼嗎？ – icktoofay

哦，我剛剛注意到了這個問題......我忘了我沒有在任何地方追加elem。我會編輯答案。 – icktoofay

我真的不知道，如果這是你需要什麼，我希望這將是有用的

for (var i in BodyWeight) { 

    var mydiv = $('<div class="ui-widget-content"></div>'), 
     myp = $('<p>'+BodyWeight[i]["ExerciseTitle"]+'</p>'), 
     mylink = $('<a>View video</a>'), 
     linkVideo = BodyWeight['linkToVideo'] ; 


    mylink 
    .attr('href','#') 
    .click(function(ev){ 
     ev.stopPropagation(); 

     //acction for linkVideo 
     alert(linkVideo); 

     }); 

    mydiv 
    .append(myp) 
    .append(mylink); 

    if(BodyWeight[i]['Color'] == 'Red') { 
    mydiv.addClass("dragred").appendTo($('#redboxes')); 
    } 
    else if(BodyWeight[i]['Color'] == 'Blue') { 
    mydiv.addClass("dragblue").appendTo($('#blueboxes')); 
    } 
}

來源

2010-02-07 00:19:58

只是爲了安德烈和邁克評論（我更願意把它放在這裏，這樣的代碼下面是可讀）。

代碼的此塊：

if(BodyWeight[i]['Color'] == 'Red') { 
    mydiv.addClass("dragred").appendTo($('#redboxes')); 
    } 
    else if(BodyWeight[i]['Color'] == 'Blue') { 
    mydiv.addClass("dragblue").appendTo($('#blueboxes')); 
    }

爲什麼不把它：

var color = BodyWeight[i]['Color'].toLowerCase(); 
    mydiv.addClass("drag"+color).appendTo($('#'+color+'boxes'));

好得多，我認爲。

來源

2010-02-07 00:42:31 Reigel

集成javascript對象與jquery

回答

相關問題