Интеграция javascript-объекта с jquery

Question

У меня есть этот объект js, который я получил от php через jason_encode (). Этот объект имеет 2 объекта, имя и видео. Затем через цикл for я распределяю имена в div. Моя проблема заключается в том, что мне нужно создать ссылку в каждом элементе div, которая создаст диалог, отображающий видео.

Я основываю эту идею на примере пользовательского интерфейса jquery: 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, к сожалению, я не могу сделать то же самое для видео.

Answer 1

Это не было проверено, но может работать. Редактировать: на самом деле он протестирован и работает сейчас. Обратите внимание, что предполагается, что Video - это идентификатор видео YouTube, а не URL-адрес видео YouTube. (т.е. мы предполагаем, что Video - это часть после ?v= в URL YouTube)

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

Answer 2

Просто комментарий к andres и mike (я предпочитаю размещать его здесь, чтобы приведенные ниже коды были читабельными).

Этот блок кодов:

 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'));

намного лучше, я думаю.

Answer 3

Я действительно не знаю, если это то, что вам нужно, я надеюсь, что это будет полезно

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