Question

我想我已经完成了大部分工作，但最好的方式是我知道怎么做。我只是在争论最后一点。

我正在尝试一次生成多个引号，由<br />标记拆分，具体取决于从下拉列表中选择的选项。

    (function ($) {

        var quotes = ["Quote 1", "Quote 2", "Quote 3", "Quote 4", "Quote 5", "Quote 6", "Quote 7", "Quote 8", "Quote 9", "Quote 10", "Quote 11", "Quote 12", "Quote 13", "Quote 14", "Quote 15"];


        $('.generate').click(function(){
            var randomQuote = quotes[Math.floor(Math.random()*quotes.length)],
                quotesSelected = $( "select option:selected" ).html();

            if (quotesSelected > 1) {
                $('.quote').html(randomQuote + ' -- ' + quotesSelected + ' selected ');
            } else {
                $('.quote').html(randomQuote);
            }
        });

    }(jQuery));

小提琴： http://jsfiddle.net/mwbhydbu/

所以例如 -

如果选择3，则会返回Quote 3 <br /> Quote 8 <br /> Quote 1

之类的内容

我希望这是有道理的。

这是我正在努力解决的特殊问题：

$('.quote').html(randomQuote + ' -- ' + quotesSelected + ' selected ');

非常感谢任何帮助！

Answer 1

以下是我的表现：

var quotes = ["Quote 1", "Quote 2", "Quote 3", "Quote 4", "Quote 5", "Quote 6", "Quote 7", "Quote 8", "Quote 9", "Quote 10", "Quote 11", "Quote 12", "Quote 13", "Quote 14", "Quote 15"];

$('.generate').click(function(){                
    var numberToGenerate = $( "select option:selected" ).val();
    var randomQuotes = getRandomQuotes( numberToGenerate );    
    var quoteHtml = randomQuotes.join("<br>");                
    $(".quote").html( quoteHtml );                              
});

function getRandomQuotes( numberOfQuotes ) {
    var results = [];
    if ( numberOfQuotes > quotes.length ) throw new Error("oh dear!");

    while( results.length < numberOfQuotes ) {
        var randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
        if ( -1 === results.indexOf( randomQuote ) ) {
             results.push( randomQuote );
        }
    }                

    return results;
}

一些注意事项：

我使用while循环来生成随机引号，直到我有足够的时间;这通常是一个for循环，但我想避免两次添加相同的引用
我使用array.join()将所有引号与<br>结合在一起，然后使用$.html()。一般来说，这种方法不是很安全，因为如果你的引号包含任何实际的HTML，那么它们就不会正确呈现。如果您允许用户提交的引号，那么这可能是破坏您网站的攻击角度。

请参阅http://jsfiddle.net/xvjez408/1/了解演示。

Answer 2

你需要像这样的东西

if (quotesSelected > 1) {
                    var txt='';
                    for(var a=1; a< quotesSelected;a++){
                        randomQuote = quotes[Math.floor(Math.random()*quotes.length)],
                    quotesSelected = $( "select option:selected" ).html();
                        txt =txt + randomQuote + ' -- ' + quotesSelected + ' selected </br>';

                    }
                    $('.quote').html(txt);
                } else {
                    $('.quote').html(randomQuote);
                }

看看 http://jsfiddle.net/mwbhydbu/3/ 我修改了一下，清理代码：）

Answer 3

我认为你可以改变

quotesSelected = $( "select option:selected" ).html();

到

quotesSelected = $( "select option:selected" ).val();

假设值与各自标题号的索引相对应。

我的刺伤，完全由jquery组成，只是为了好玩......

＆＃13;

(function($) {

      var quotes = ["Quote 1", "Quote 2", "Quote 3", "Quote 4", "Quote 5", "Quote 6", "Quote 7", "Quote 8", "Quote 9", "Quote 10", "Quote 11", "Quote 12", "Quote 13", "Quote 14", "Quote 15"];

      var select = "<select>";
      for (q in quotes) {
        select += "<option value='" + q + "'>" + quotes[q] + "</option>"
      }
      $('body').append(select + "</select>");
      $('body').append('<p class="quote"></p>');
      $('body').append('<br>');
      $('body').append('<button type="button" class="generate">Generate</button>');

      $('.generate').click(function() {
        var randomQuote = quotes[Math.floor(Math.random() * quotes.length)],
          quotesSelected = $("select option:selected").val();

        if (parseInt(quotesSelected) + 1 > 1) {
          $('.quote').html(randomQuote + ' -- ' + (parseInt(quotesSelected) + 1) + ' selected ');
        } else {
          $('.quote').html(randomQuote);
        }
      });

    }(jQuery));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

这样的事情：

(function ($) {

            var quotes = ["Quote 1", "Quote 2", "Quote 3", "Quote 4", "Quote 5", "Quote 6", "Quote 7", "Quote 8", "Quote 9", "Quote 10", "Quote 11", "Quote 12", "Quote 13", "Quote 14", "Quote 15"],
                getRandomQuote = function () {
                    return quotes[Math.floor(Math.random()*quotes.length)]
                };


            $('.generate').click(function(){
                var quotesSelected = $( "select option:selected" ).html(),
                    content = '';
                for (var i = 0; i < quotesSelected; i++) {
                    content = content + '<br />' + getRandomQuote();
                };

                $('.quote').html(content);
            });

        }(jQuery));

Answer 5

每次需要引号时都需要随机调用。这是一个更新的小提琴http://jsfiddle.net/mwbhydbu/4/

if (quotesSelected > 1) {
                    $('.quote').html('');
                    while(quotesSelected>0){
                        randomQuote = quotes[Math.floor(Math.random()*quotes.length)]
                        $('.quote').append(randomQuote+"<br>");
                    quotesSelected--;
                    }
                } else {
                    $('.quote').html(randomQuote);
                }

jQuery / Javascript - 从数组中追加多个项目

5 个答案: