Question

我是Javascript和JQuery的初学者，我正在努力实现以下目标：

在TinyMCE中，我希望能够键入以下内容：

点击此处观看视频1
[弹出]路径/到/ file1.mp4
点击此处观看视频2
[弹出]路径/到/ file2.mp4

然后JQuery将使用[popup]挂钩来识别我想要一个对话框窗口的实例，放置一个锚来调用该对话框，通过调用JWPlayer来填充对话框，并将每个实例中给出的路径提供给它。它存储在每个URL中，随后将该确切的URL提供给我遇到很大困难的播放器。

管理最终实现它 - 毫无疑问，存在更优雅的解决方案。感谢Ben带来了我。

使用工作解决方案更新：当前代码：

$(document).ready(function(){

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {
    var nextnumber = num++;

    //add a general and a unique class to the list item containing the hook
    //this leaves only the path to file in that list item.
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);

    //Split on the hook, and save remainder of text (the path to file) as the 'path' attr
    var splitpath = $(this).text().split("[popup]");
    $(this).attr("path", splitpath[1]); 
    var path = $(this).attr("path");
    //alert($(this).attr("path"));

    //Get the previous list item (the call to action), and give it general and unique classes also.
    $thisArrow = $(this).parent().prev();
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

    //Make the call to action an anchor link, with a general class identifier.
    $thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>');

    //store path to poster as var, and hide the .popup li's
    $('li.popup').parent().hide();
});

$('.opener').click(function() {
    var Header = $(this).text();
    var popupURL = $(this).attr("path");
    var popupBG = "../contents/css/images/white-nontrans.jpg";

var thisDialog = $('<div></div>')

   //N.B. THE FOLLOWING HTML SHOULD BE ENTIRELY INCLUDED IN THE SINGLE .HTML() CALL
   //Otherwise Jquery will automatically close the <object> after the first line

   .html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420">')
.append('<param name="movie" value="../mediaplayer/player.swf">')    
.append('<param name="allowfullscreen" value="true">')
.append('<param name="allowscriptaccess" value="always">')
.append('<param name="bgcolor" value="#FFFFFF">')
.append('<param name="wmode" value="opaque">') 
.append('<param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '">') 
.append('<embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" />')
.append('</object>')

.dialog({ autoOpen: false, title: Header, modal: true, width:570 });
thisDialog.dialog('open');
    return false;
});
});

Answer 1

相对简单。在转换[popup]挂钩的函数中，在var counter = 0循环之前定义.each。在循环内部，迭代计数器，并使用该数字生成唯一的数据/标记，您可以在循环中应用它们。

这是对解决方案的简要描述。如果您需要更多细节，请告诉我。

编辑：似乎问题不在于存储本身，而在于识别和控制URL。您应该能够将URL存储在锚标记中的任意命名属性中。它将是一个技术上“非法”的标签，因此它不会做任何事情，但它会在那里，它不会干扰任何事情，你将能够轻松地使用jquery {{1}功能。

获取网址本身，以便您可以将其放入您选择的属性中，最好使用javascript的.attr()。首先，拆分“[弹出]”。这将为您提供一个数组，其中第一个元素从文本块的开头开始，每个后续元素在“[popup]”之后立即开始。然后将''中的每一个（除了第一个）分开。这将为您提供一个由空格分割的元素数组 - 这意味着数组中的第一个元素（正如您对我所描述的那样）应该是您正在寻找的URL。

EDIT2：

split()

完成此操作后，只要您拥有$("li:contains('[popup]')").each(function() { var text = $(this).text(); //by my understanding of split(), the [0] element in the array would be the //bit before the "[popup]" string, so we want the [1] element. var splittext = text.split("[popup]")[1]; var splitsplittext = splittext.split[" "]; //by my understanding of the way you've presented the use rules, the [0] //element of splitsplittext ought to contain your path now. If you want //to make it more robust (say, allowing the user to put an optional space //between the "[popup]" and the path) then the logic here gets more //complicated. $(this).attr("pathHolder", splitsplittext[0]); }，就可以致电<li>取回地址字符串

edit3：一些想法...... - 您通过手动添加空格来设置多个类。我对良好编码实践的理解表明你应该多次调用addClass。 - 你在选择器上做了很多事情，你应该用变量做。例如，当您可以继续使用$liNode.attr("pathholder")时，可以使用$('li.pop'+nextnumber)。您只需向箭头添加一个类，这样就可以在$(this)之类的内容时使用$('li.arr'+nextnumber)，然后在需要引用该内容时使用$thisArrow = $(this).prev()。 - 当您定义对话框时，您不需要使用$thisArrow - 您只需要var $dialog =或var。 $表示它是一个javascript变量，这意味着它具有强大的范围。 var表示它是一个JQuery对象，这意味着它基本上是作用于页面的。不幸的是，在你编写代码时，这两种方法都不适合你。 javascript版本几乎会立即自行销毁，因为你会直到函数结束，而JQuery版本会在每个循环的下一个循环中覆盖它自己。为了妥善保存它，你必须在某个地方实际写它。另外，我很确定JQuery会查看$而感到困惑。看起来它正试图成为一个选择器并失败。

使用JQuery Dialog激活多个独特的弹出窗口

1 个答案: