Question

我创建了一个网页，允许用户根据文本框中的输入更新多个iframe。我想扩展此页面的功能，以允许用户一次输入多个值。

这些值将由一个新行分隔，我想在某种侧栏菜单中显示所有值，我希望用户能够通过单击它们来选择值和/或循环显示值＆＃34;下一个＆＃34;或＆＃34;之前＆＃34;的按钮。

这是当前页面的工作方式：

<input type="text" id="user">

<iframe id="frame1" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame2" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame3" width="450px" height="880px" src="" frameborder=0></iframe>

<div class="button">Submit</div>

// Clicks submit button if enter key is pressed
$("#user").keyup(function(event){
  if(event.keyCode == 13){
    $(".button").click();
  }
});

// If submit button is pressed, update iframes with contents of text box 
$(".button").click(function(){
    $('#user').val(function(n,c){
       $('#frame1').attr('src', "url" + c);
       $('#frame2').attr('src', "url" + c);
       $('#frame3').attr('src', "url" + c);
       $('#user').attr('value',c);
       return c
    });
});

根据我的理解，我需要通过基于新行分割值来将用户输入添加到数组中，如here所述。然后使用here所描述的内容显示它们。

我真正挣扎的是如何将这些数组值放入用户可以与之交互的某种侧边栏菜单中。希望如果我能做到这一点，我可以使用点击处理程序来更新iframe。

非常感谢任何帮助，谢谢！

Answer 1

也许是这样的：

http://fiddle.jshell.net/a1qzdk3a/1/

希望有帮助... =）提供反馈！

angular.module('starter.services', [])
.factory('Likes', function ($http) {
    // likes is a promise of array of likes
    var likes = $http.get("http://localhost:8100/js/offers.json")
            // then allows transforming the promise of http response into a promise of something else
            .then(function(response) {
                // transforms the http response into an array of likes
                return response.data.offers;
            });
    return {
        // all returns a promise of array of likes
        all: function () {
            return likes;
        },
        // get returns a promise of like
        get: function (likeId) {
            // then allows transforming a promise of array of likes into a promise of something else
            return likes.then(function(likes) {
                // transform the array of likes into a single like
                for (var i = 0; i < likes.length; i++) {
                    if (likes[i].id === parseInt(likeId)) {
                        return likes[i];
                    }
                }
                return null;
            }
        }
    };
});

使用jquery创建基于用户输入数组的交互式菜单

1 个答案: