Question

我的系统中有一个部分允许用户输入成分，然后当他们点击“实时预览”时，每个成分都以纯文本打印出来，这样他们就可以使用jQuery检查拼写。但是它只打印出第一个元素，而不是之后的元素。谁能明白为什么？这是小提琴http://jsfiddle.net/X94At/

HTML

<div class="recipe-ingredients pure-u-1 pad8bottom clearfix">
                                    <span class="heading">Ingredients</span>

                                    <div class="ingredients pure-u-1 clearfix">
                                        <div class="ingredient pure-u-1 clearfix">
                                            <p>
                                            <input type="text" id="ingredient_1" name="ingredient[]" placeholder="Ingredient"  class="element pure-u-6-24" />
                                            <input type="text" id="quantity_1" name="quantity[]" value="" placeholder="Quantity"  class="element pure-u-4-24" />
                                            <select id="selectQuantity_1" name="quantityType[]"  class="element pure-u-3-24">
                                                <option value="grams">Grams</option>
                                                <option value="ounces">Ounces</option>
                                                <option value="Pounds">Pounds</option>
                                            </select>
                                            <input type="text" id="alternative_1" name="alternative[]" value="" placeholder="Alternative Ingredient"  class="element pure-u-6-24" />
                                            <input type="text" id="addedQuantiy_1" name="addedQuantity[]" value="" placeholder="Quantity per extra person"  class="element pure-u-4-24" />
                                            </p>
                                        </div>

                                    </div>
                                    <a href="javascript:void(0)" class="pure-button pure-u-1-6 pure-button-primary" id="addNewIngredient">Add Ingredient</a>

                                </div>

用于实时预览的HTML

 <div id="toPopup">
                <div class="close">&times;</div> <span class="ecs_tooltip">End Preview<span class="arrow"></span></span>
                <div id="live-preview-display">
                    <div id="lp-name"></div>
                    <div id="lp-ingredientslist">
                        <h3>Ingredients</h3>
                    </div>
                    <div id="lp-step">
                        <h3>Method</h3>
                    </div>
                </div>
            </div>
            <div class="loader"></div>
            <div id="backgroundPopup"></div>

的jQuery

$(".ingredient").on('blur change focus', function () {
            $('.ingredient p').each(function () {
                var i = $('.ingredient p').size(),
                    el = $(this);
                if ($('#lp-ingredientslist .ingredient_' + i).length == 0) {
                    $("#lp-ingredientslist").append('<span class="ingredient_' + i + '"></span>');
                }
                var ingredient = el.find('input[name="ingredient[]"]').val(),
                    quantity = el.find('input[name="quantity[]"]').val(),
                    quantityType = el.find('select[name="quantityType[]"]').val(),
                    alternative = el.find('input[name="alternative[]"]').val();
                if (!quantity || !ingredient)
                    return;
                var alt = '';
                if (alternative.length >= 0) {
                    alt = ' (you can also use ' + alternative + ')';
                }
                $('#lp-ingredientslist .ingredient_' + i).html(i + '. ' + quantity + ' ' + quantityType + ' of ' + ingredient + alt + '</br></br> ');
            });
        });

jQuery添加成分

$('.recipe-ingredients #addNewIngredient').on('click', function () {
            var i = $('.recipe-ingredients .ingredient').size() + 1;
            $('<div class="ingredient pure-u-1 clearfix"><input type="text" id="ingredient_' + i + '" name="ingredient[]" placeholder="Chocolate"  class="element pure-u-6-24" /><input type="text" id="quantity_' + i + '" name="quantity[]" value="" placeholder="Quantity"  class="element pure-u-4-24" /><select id="selectQuantity_1" name="quantityType[]"  class="element pure-u-3-24"><option value="grams">Grams</option><option value="ounces">Ounces</option><option value="Pounds">Pounds</option></select><input type="text" id="alternative_' + i + '" name="alternative[]" value="" placeholder="Alternative Ingredient"  class="element pure-u-6-24" /><input type="text" id="addedQuantiy_' + i + '" name="addedQuantity[]" value="" placeholder="Quantity per extra person"  class="element pure-u-4-24" /><a href="javascript:void(0)" class="remove" title="Remove">&times;</a></div>').appendTo($('.recipe-ingredients .ingredients'));

谢谢！

Answer 1

不完美的需求改善 Working Fiddle

$(".ingredient").on('blur change focus', function () {

此行需要替换为

$('.ingredients').on('blur change focus', function () {

当您动态添加.ingredient类时，更改将显示在.ingredients ....

<强> 更新
Fiddle with a new look 将信用转到@WASasquatch指出...

希望它有帮助...... !!

尝试使用jQuery打印出用户输入

1 个答案: