javascript - 如果元素更改，Jquery 数组向上和向下计数

Question

如果另一个函数改变了它的字体大小，我想改变 dom 元素的颜色。

例子:html:

<p id="hi">
    VALUE
</p>

jquery:

fancyColors = {
  1: "blue",
  2: "green",
  3: "yellow",
  6: "#97bf0d"
};

$(function () {
    $("#hi").on("change", function () {
        var valuE = $('#hi');
        valuE.css("color", fancyColors[1]);
        var getSize = $('#hi').css("font-size");
        if (getSize != 16) {
            valuE.fancyColors[1++]
        } else {
            valuE.fancyColors[2--];
        }
    });
});

默认字体大小应为 16。现在，如果有什么无关紧要，无论是什么或谁将其更改为小于 16。它应该在颜色数组中计数。

如果它的字体大小变小，它应该在数组中倒数。

我该怎么做？

谢谢你的帮助

Answer 1

试试这个，

fancyColors = {
  0: "blue",
  1: "green",
  2: "yellow",
  3: "#97bf0d"
};

$(function () {
     var i=0;
    $("#hi").on("change", function () {
        var valuE = $(this); // use $(this);
        if(i==4){// reinit i to 0
           i=0;
        }
        if(i<0){
           i=3;// set max limit
        }
        valuE.css("color", fancyColors[i]);
        var getSize = valuE.css("font-size");
        if (parseInt(getSize,10) != 16) { // parseInt to remove px from font-size
            i++; // use i++, and fancyColors is not an object of valuE
        } else {
            i--; // use i--
        }
    });
});

您不能使用 valuE.fancyColors，因为 fancyColors 不是 valuE 的对象

Demo

已更新 如果您想自动触发更改事件 然后尝试 DOMSubtreeModified喜欢，

$("#hi").on("DOMSubtreeModified", function () {

Updated Demo