Question

我有一系列汽车，我正在循环每辆车。我使用window.prompt（）方法从用户那里获取输入。我拿这个值并通过我的汽车阵列过滤它。我只想知道如何将用户选择的汽车名称限制为只有阵列中的汽车名称

 var CarsWorld = {

        cars : ['Honda','toyota','mercedes','jaguar'],

        init: function(){

            var getData = prompt('Which Car You Wanna Drive','');

            for(var i = 0 ; i < this.cars.length ; i++){

                $('.wrap').append(' ' + this.cars[i] + ' <br/> ');

            }

        },

    };

    CarsWorld.init();

Answer 1

function evaluate(context){
  return "\n";
};

请注意，如果汽车不在列表中，那么它将不会输出任何内容。在这里小提琴：http://jsfiddle.net/e5qh3pvw/

Answer 2

我试图将您的问题改写为更易理解的问题（目前正在同行评审中）。我知道您希望有一个提示，将用户的选择限制在阵列中的汽车模型。

不幸的是，window.prompt()无法实现这一点，也没有任何同步（阻塞）方法来实现它。您将需要使用模态对话框，并在您的选择中插入常规的html select元素，或使用一组单选按钮。

我已经创建了fiddle，随着我的进步，它开始变得臃肿。我使用了一些先进的技术，只是为了引起你的好奇，因为我怀疑你是javascript的新手。

<强>使用Javascript：

var CarsWorld = {

    cars : ['Honda','toyota','mercedes','jaguar'],

    init: function(){

        var getData = 'none';

        for(var i = 0 ; i < this.cars.length ; i++){

            $('.wrap').append(' ' + this.cars[i] + ' <br/> ');

        }

        var prompter = new CarsWorld.PromptSelect('Which Car You Wanna Drive', function(selected){
            getData = selected;
            alert('You chose '+ getData +'! ');
            //other logic you want to apply on getData
        });
        prompter.show();
    }

};

CarsWorld.PromptSelect = function(message, callback) {
    self = this;

    this.init = function(){
        self.dropdown = '<select id="selectedCar">';
        $.each(CarsWorld.cars, function(index, car){
            self.dropdown += '<option>' + car + '</option>';
        });
        self.dropdown += '</select>';
        self.markup = [
            '<div class="prompt">',
            '<div class="title">CarsWorld Prompt</div>',
            '<div class="body">',
            '<label for="selectedCar">'+ message +':</label>' + this.dropdown + '</div>',
            '<div class="footer">',
            '<button class="btn-ok">Ok</button>',
            '<button class="btn-cancel">Cancel</button>',
            '</div>',
            '</div>'
        ].join('');
    };
    this.show = function(){
        $('.overlay').show();
        $('body').css('overflow', 'hidden');
        self.init();
        $('body').append(self.markup);
        $('.prompt .btn-ok').on('click', function(){
            self.hide();
            callback($('#selectedCar').val());
            self.destroy();
        });
        $('.prompt .btn-cancel').on('click', function(){
            self.destroy();
        });
        return self;
    };
    this.hide = function(){
        $('.prompt').hide();
        $('.overlay').hide();
        $('body').css('overflow', 'auto');
        return self;
    };
    this.destroy = function(){
        self.hide();
        return self;
    };
};

CarsWorld.init();

<强> HTML：

<div class="wrapper">
    <h1> Please choose the car of your type </h1>

    <div class="wrap"></div>
    <div class="overlay"></div>
</div>

<强> CSS：

    .overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 990;
    background: #444;
    opacity: 0.5;
    top: 0;
    left: 0;
}

.prompt {
    display: block;
    position: absolute;
    z-index: 999;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

.prompt .title {
    background: black;
    color: white;
    height: 10%;
    padding: 10px;
    border-radius: 3px 3px 0 0;
    text-align: center;
    font-weight: bold;
}

.prompt .body {
    background: white;
    height: 60%;
    padding: 20px;
}

.prompt .footer {
    background: grey;
    text-align: right;
    padding: 10px;
    height: 10%;
    border-radius: 0 0 3px 3px;
}

如何在javascript中使用数组和对象

2 个答案: