Question

我似乎无法理解为什么我的数量增加和减少按钮仅适用于一个输入。这是js小提琴的链接和下面的代码

QObject* m_rootObject = engine.rootObjects().first();
if(m_rootObject) {
    QWindow *window = qobject_cast<QWindow *>(m_rootObject);
    if(window) {
        WId wid = window->winId();
    }
}

和html

＆LT;

var value,
quantityAmount,
increase,
decrease,
quantity = document.getElementsByClassName('quantity-container');

function init() {
    for ( var i = 0; i < quantity.length; i++ ) {
        quantityAmount = quantity[i].getElementsByClassName('quantity-amount')[0];
        increase = quantity[i].getElementsByClassName('increase')[0];
        decrease = quantity[i].getElementsByClassName('decrease')[0];
        increase.addEventListener('click', increaseValue);
        decrease.addEventListener('click', decreaseValue);
    }
};

function increaseValue(event) {
    value = parseInt(quantityAmount.value, 10);

    console.log(quantityAmount, quantityAmount.value);

    value = isNaN(value) ? 0 : value;
    value++;
    quantityAmount.value = value;
}

function decreaseValue(event) {
    value = parseInt(quantityAmount.value, 10);

    value = isNaN(value) ? 0 : value;
    if (value > 0) value--;

    quantityAmount.value = value;
}

init();

Answer 1

我会这样做：

 static connectWidthCortex(){
  xdevapi.getSession({
        host: 'localhost',
        port: 33060,
        dbUser: 'admin',
        dbPassword: 'xxxx'
    }).then((session)=> {
  return session.getSchema("cortex");
});
};

static createCollection(collname){
    this.connectWidthCortex().then((db)=> {
  console.log("Cortex connected")
  return db.createCollection(collname);
}).catch((err)=> {
  console.log("connection failed")
});
}

问题是您正在使用在Array.prototype.slice.call(document.querySelectorAll('.quantity-container')) .map(function (container) { return { input: container.querySelector('.quantity-amount'), decrease: container.querySelector('.decrease'), increase: container.querySelector('.increase'), get value () { return parseInt(this.input.value); }, set value (v) { this.input.value = v; } } }) .forEach(function (item) { item.decrease.addEventListener('click', function () { item.value -= 1; }); item.increase.addEventListener('click', function () { item.value += 1; }); });函数中重新分配的全局变量。在这种情况下，您不需要任何全局变量，因为增加/减少的值存储在输入中。

fiddle

Answer 2

您需要修理几件事：

increaseValue和decreaseValue函数始终作用于quantityAmount全局变量中存储的输入。在init()之后，该变量将始终设置为页面上的最后一个输入。相反，您可以传递输入以作为这些函数的参数进行修改。
在init()内，变量i将遇到相同的错误（在quantity.length运行后将设置为init()。为了解决这个问题，您可以捆绑所有内容在函数的for循环中，这将创建一个新的变量范围，从而避免上述问题。

这是我进行了这些修改的版本：https://jsfiddle.net/c7dm2oev/17/

我有：

删除了不需要的全局变量
编写了createBindings函数来打包一个数量控件的数据绑定逻辑
使increaseValue和decreaseValue将quantityAmount输入作为参数

修改

现在increaseValue和decreaseValue不再是事件处理程序，event参数可以安全删除：https://jsfiddle.net/c7dm2oev/25/

最终代码：

＆lt; - language：lang-js - ＆gt;

var value,
    quantity = document.getElementsByClassName('quantity-container');

        function createBindings(quantityContainer) {
      var quantityAmount = quantityContainer.getElementsByClassName('quantity-amount')[0];
      var increase = quantityContainer.getElementsByClassName('increase')[0];
      var decrease = quantityContainer.getElementsByClassName('decrease')[0];
      increase.addEventListener('click', function () { increaseValue(quantityAmount); });
      decrease.addEventListener('click', function () { decreaseValue(quantityAmount); });
    }

    function init() {
        for (var i = 0; i < quantity.length; i++ ) {
                    createBindings(quantity[i]);
        }
    };

    function increaseValue(quantityAmount) {
        value = parseInt(quantityAmount.value, 10);

        console.log(quantityAmount, quantityAmount.value);

        value = isNaN(value) ? 0 : value;
        value++;
        quantityAmount.value = value;
    }

    function decreaseValue(quantityAmount) {
        value = parseInt(quantityAmount.value, 10);

        value = isNaN(value) ? 0 : value;
        if (value > 0) value--;

        quantityAmount.value = value;
    }

    init();

Vanilla JS数量增量和减量按钮仅更新一个输入

2 个答案:

修改