Question

我有两个文件：一个html文件（带有下面的代码）和一个javascript文件（它为<span id="quantity">创建一个值）代码工作正常，但是只有刷新整个页面时这个词才会改变

一旦“数量”发生变化，我希望这个词从“文章”变为“文章”，反之亦然。这可能吗？如果是这样，怎么样？

<span id="quantity" class="simpleCart_quantity"></span>
<span id="quantityText"></span>

<script type="text/javascript">

        $(window).load(function() 
        {
        var quantity = document.getElementById("quantity"),
            quantityText = document.getElementById("quantityText");
        if (parseInt(quantity.innerHTML, 10) === 1) {
            quantityText.innerHTML = "article";
       } else {
            quantityText.innerHTML = "articles";
        }
        });

</script>

Answer 1

您可能希望查看像Knockout JS这样的MVVC框架。例如，您可以将 #quantity <span></span>元素的内容设置为可观察对象。

但是，请尝试阅读this SO thread以找到类似于您可能希望的解决方案。总之，更改事件仅发生在表单字段模糊的浏览器中，因此您需要实现$("#quantity").trigger('change')

在加载DOM元素后进行触发设置后，您可以执行以下操作：

$('#myParentNode').on('change','#mynum', function() {
    // Add your logic in here
    $('#quantityText').text('articles')  .... .. .. ..... 
});

Answer 2

通常情况下，span元素不会触发change事件，因此您无法像在input元素中通常那样订阅它。

但是，您可以在相同的代码中使用jQuery触发此类事件，这会更改span的值（我假设有这样的代码，因为通常span不会更改值）。

以下是每10秒模拟此更改的示例，并触发change事件。它还包括该更改事件的处理程序，该处理程序复制另一个范围中的值。

<span id="quantity" class="simpleCart_quantity">1</span>
<span id="quantityText"></span>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    var quantity = $("#quantity"),
        quantityText = $("#quantityText");

    setInterval(function() {
        var currentVal = parseInt(quantity.html());
        if (currentVal >= 10) {
            quantity.html(1);
        }
        else {
            quantity.html(currentVal + 1);
        }
        quantity.trigger('change');
    }, 10000);

    quantity.on('change', function(sender, args) {
        quantityText.html($(this).html());
    });
});

</script>

值更改时重新运行javascript代码

2 个答案: