Question

目标是从#list中的链接获取信息，并在＃list3中创建一个新链接。这是链接http://jsfiddle.net/4y5V6/24/ 有没有办法让它成为一个单击链接它将它推到＃list3并使链接看起来像这twitch.tv/chat/embed?channel=(channelname)&popout_chat=true？

感谢您的时间!!

HTML：

<div id="navi">
                        <ul>
                        <li>Stream Selection:</li>
                            <li>SC2<ul id="list"><li><ul></ul></li></ul></li>
                            <li>League<ul id="list2"><li><ul></ul></li></ul></li>
                            <li>Chat<ul id="list3"><li><ul></ul></li></ul></li>
                            </ul>
                        </div>





<iframe id="iframe1" name="iframe1" type="text/html" src="" frameBorder="0" height="200px" width="300px">

                </iframe>

填充列表的当前函数。

// first set of streams SC2
   $.getJSON("https://api.twitch.tv/kraken/search/streams?q=starcraft&limit=18&&type=top&callback=?", function (data) {
    var temp = "";

    $.each(data.streams, function (index, item) {
        temp = temp + "<li><a target='iframe1' href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'>" + item.channel.display_name + "</a></li>";

        });
    $("#list ul ").html(temp);
});




// next set of streams LoL
   $.getJSON("https://api.twitch.tv/kraken/search/streams?q=League%20of%20Legends&limit=18&&type=top&callback=?", function (data) {
    var temp = "";

    $.each(data.streams, function (index, item) {
        temp = temp + "<li><a target='iframe1' href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'>" + item.channel.display_name + "</a></li>";

        });
    $("#list2 ul ").html(temp);
});

Answer 1

$('#navi').on('click', '#list a', function(e) {
    var x = $(this).prop('href'),
        y = x.slice(x.indexOf('channel')+8),
        z = 'twitch.tv/chat/embed?channel=('+y+')&popout_chat=true',
        clone = $(this).clone().attr('href', z);
    $('#list3 ul').append($('<li />', { html: clone }));
});

Fork

替代版本：No duplicates.

添加在新的小窗口中打开新聊天链接的功能

jsFiddle 仅将列表1复制到列表3
jsFiddle 从列表1和2复制到列表3

//  The following call is jQuery's way of assigning events to both "Static"
//  && "Dynamic" Elements. This way, even if the element is loaded after
//  page load, it still gets the event callback.
//  Keep in mind, you do need either a static parent (such as below, I use
//  `$('#navi')`, since I assume this element is always present on your page 
//  load) |OR| you can use `$(document)`. The later is often recommended 
//  against, as you could run into "slowed down response" issues or naming 
//  issues. Personally, I use `$(document)` all the time and haven't had a 
//  complaint yet.
//  Then you simply assign your event(s) to your "Selectors"
//  For just list 1 that would be
//  .on('click', '#list a'
//  For list 1, and 2 that would be
//  .on('click', '#list a, #list2 a'
//  See Also: http://api.jquery.com/on/
$('#navi').on('click', '#list a, #list2 a', function(e) {
    var x = $(this).prop('href'),   //  get href of <a> clicked
        y = x.slice(x.indexOf('channel')+8),    //  extract name
        z = 'twitch.tv/chat/embed?channel=('+y+')&popout_chat=true',    //  create new href link
        clone = $(this).clone().attr('href', z),    //  clone this <a> and replace href with new one created
        item = $('<li />', { class: y, html: clone });  //  create new <li> making our cloned <a> it's innerHTML
    if (!$('#list3 ul .' + y).length) $('#list3 ul').append(item);  //  check <li> item doesn't already exist and add to list
})  //  Thanks to jQuery "chaining", I don't have to "recall" our static parent
.on('click', '#list3 a', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    //  The following is basic JavaScript and simply opens a new window
    //  simply adjust width and height based on PIXELS
    //  see more window.open options @: http://www.w3schools.com/jsref/met_win_open.asp
    //  See Also: http://stackoverflow.com/questions/tagged/javascript+window+open
    window.open(lnk, "myWindowName", "width=800, height=600");
})

提取链接查询字符串数据并在不同列表中创建新链接

1 个答案: