将 javascript 对象与 jquery 集成答案

【问题标题】：Integrating a javascript object with jquery将 javascript 对象与 jquery 集成
【发布时间】：2010-02-07 00:02:08
【问题描述】：

我有这个 js 对象，它是通过 jason_encode() 从 php 获得的。该对象有 2 个对象，名称和视频。然后通过一个 for 循环，我将名称分配到 div 中。我的问题是我需要在每个 div 中创建一个链接，该链接将创建一个显示视频的对话框。

我的这个想法来自 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 中，不幸的是我不能对视频做同样的事情。

【问题讨论】：

标签： php javascript jquery json

【解决方案1】：

这尚未经过测试，但它可能有效。 编辑：它实际上已经过测试并且现在可以工作了。请注意，这假定 Video 是 YouTube 视频 ID，而不是 YouTube 视频 URL。（即，我们假设 Video 是 YouTube URL 中 ?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;
    });
}

【讨论】：

我一直在努力使用此代码以使其正常工作。问题是 jquery 抑制了我认为的错误，所以我很难调试它。在单击事件执行然后开始追加之前，这似乎什么都不做？
据我了解，您想要一些基于 JSON 数据附加 div 的东西，当您单击 div 时，它会在对话框中打开视频。如果这不是你想要的，你能改写你想要做什么吗？
哦，我刚刚注意到了这个问题......我忘了我没有在任何地方附加 elem。我会编辑答案。
我认为唯一的问题是它只显示最后一个视频。我有正确的变量，因为其中一个视频正在播放，所以这是有效的。我想知道它是否覆盖了相同的事件？编辑：似乎单击事件仅在单击后才设置。有什么想法吗？
尝试在 click 事件中使用 exercise["Video"] 调用警报，以确保它在其中获取正确的视频 ID。这是首先要检查的。

【解决方案2】：

不知道是不是你需要的，希望对你有用

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

【讨论】：

【解决方案3】：

只是对 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'));

我觉得好多了。

【讨论】：