Question

在输入旁边我想显示带有加号和减号的两个div，这样当点击其中一个div时，该值会使输入增加或减少。

它几乎完美无缺，但是保存输入的最佳方式。是通过更改输入而不是加载/save网址。输入与此代码完美配合，即在更改/保存网址时加载并保存值。

我希望div能够做到这一点，当点击div时，输入内的值会发生变化，值会被/save网址保存。

我如何更改我的代码？

代码HTML：

            <div class="quote-item product-quote-qty">
                    <div id="qdiv_<?php echo $item->getId() ?>" nowrap="nowrap" class="qty-div input-box">
                    <div class="reduced items item-<?php echo $item->getQty()*1; ?>" onclick="var result_<?php echo $item->getId() ?> = document.getElementById('qty_<?php echo $item->getId() ?>'); var qty_<?php echo $item->getId() ?> = result_<?php echo $item->getId() ?>.value; if( !isNaN( qty_<?php echo $item->getId() ?> ) &amp;&amp; qty_<?php echo $item->getId() ?> > 1 ) result_<?php echo $item->getId() ?>.value--;saveForm();return false;">-</div>

                    <input type="text" name="quote_request[<?php echo $item->getId() ?>][qty][]" id="qty_<?php echo $item->getId() ?>" value="<?php echo $item->getQty()*1; ?>" size="4" title="<?php echo $this->__('Qty') ?>" onchange="location.href='save'" class="required-entry validate-zero-or-greater input-text" maxlength="12" />

                    <div class="increase items" onclick="var result_<?php echo $item->getId() ?> = document.getElementById('qty_<?php echo $item->getId() ?>'); var qty_<?php echo $item->getId() ?> = result_<?php echo $item->getId() ?>.value; if( !isNaN( qty_<?php echo $item->getId() ?> )) result_<?php echo $item->getId() ?>.value++;saveForm();return false;">+</div>
                    </div>
            </div>

CODE JS：

    function saveForm() {
        var form = $('quotelist').clone(true);
        //update textarea
        var i = 0;
        $('quotelist').select('textarea').each(function (el) {
            form.select('textarea')[i].value = $(el).value;
            i++;
        });

        var action = $('quotelist').action;
        action = action.replace("quoteRequest", "save");
        form.action = action;
        form.request({
            onComplete: function(){ Miniquote.reloadContent(); }
        });
    }

    function addQtyFieldSaver(){
        $$('#shopping-cart-table input[type=text]').each(function (el) {
            return $(el).observe('blur', function(e){
                saveForm();
            });
        });
    }

编辑：

    function addQtyFieldSaver(){
        $$('#shopping-cart-table input[type=text]').each(function (el) {
            return $(el).observe('blur', function(e){
                saveForm();
            });
        });

    $('.reduced').click(function () {
    var el =  $(this).parent().find('input:text');      
    var newval = (parseInt($(el).val(),10) - 1 > 0)?$(el).val() - 1:0;
    el.val(newval);
    saveForm();
    });

    $('.increase').click(function () {      
    var el = $(this).parent().find('input:text');
    var newval = parseInt($(el).val(),10)+1;
    el.val(newval);
    saveForm();
    });

    }

Answer 1

在你的加号和减号div中删除你的PHP代码

$(".formContainer").each(function(i, obj) {
        $form = $(this).validate();
$(this).on('blur', '.inputField', function(e){
        if( $(this).hasClass("errorMessage") && $(this).parent().not( "invalid" ) ) {
            $( this ).parent().addClass(" invalid");
            $( this ).parent().removeClass("inputValid");
        }
        if( $(this).hasClass("valid") ) {
            $( this ).parent().addClass(" inputValid");
            $( this ).parent().removeClass("invalid");
        }
    });
 });

并将其添加到addQtyFieldSaver函数

class AlterColorsDatatype < ActiveRecord::Migration[5.0]
  def change
    change_column :quotes, :colors, :jsonb, default: '[]', using: 'colors::jsonb'
  end
end

使用此解决方案，+ / - div上的click事件使用其父容器访问输入文本字段，以获取输入值的数量并进行更改。然后调用saveForm（）函数来保存新数据。

编辑：完整示例

＆＃13;

<div class="reduced items">-</div>
<div class="increase items" >+</div>

＆＃13;

    $('.reduced').click(function () {
        var el =  $(this).parent().find('input:text');      
        var newval = (parseInt($(el).val(),10) - 1 > 0)?$(el).val() - 1:0;
        el.val(newval);
        saveForm();
    });
    $('.increase').click(function () {      
        var el = $(this).parent().find('input:text');
        var newval = parseInt($(el).val(),10)+1;
        el.val(newval);
        saveForm();
    });

＆＃13;

保存输入值onclick div

1 个答案: