如果元素更改,Jquery数组会向上和向下计数

时间:2014-03-26 08:36:37

标签: javascript jquery

如果另一个函数更改了其字体大小,我想更改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.它应该在颜色数组中计数。

如果字体大小越来越小,它应该在数组中倒计时。

我该怎么做?

感谢您的帮助

2 个答案:

答案 0 :(得分:2)

试试这个,

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

已更新如果您想trigger change event automatically然后尝试DOMSubtreeModified

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

Updated Demo

答案 1 :(得分:0)

使用click方法代替更改方法。并且存在像1 ++这样的语法错误。你不能像这样增加但是通过使用for循环来做i ++:

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

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

if(!this.defaultValue){
          var valuE = $('#hi');
       for(var i=0;i<fancyColors.length;i++){
          valuE.css("color", fancyColors[i]);
          var getSize = $('#hi').css("font-size");
        if(getSize != 16 ) {
          valuE.fancyColors[i++] 
        } else {
          valuE.fancyColors[i--]; 
        }
    }
}
        });
        });

更改仅用于输入元素类型。