Question

我知道这个问题或类似的问题已被多次提出过，但到目前为止，没有任何答案对我有用。

我有这段代码：

＆＃13;

    $(document).ready(function() {
        $(".ta").keyup(function() {
            if (this.value == "0") {
                $("#div1").css("display", "block");
            }
            else {
                $("#div1").css("display", "none");
            }
            if (this.value == "1") {
                $("#div2").css("display", "block");
            }
            else {
                $("#div2").css("display", "none");
            }
            if (this.value == "2") {
                $("#div3").css("display", "block");
            }
            else {
                $("#div3").css("display", "none");
            }
        });
    });

var data = {
    "ARS": {
      "01To03Years": {
        "N": {
          "ARGENTINA": 951433
        }
      },
      "Above05Years": {
        "N": {
          "ARGENTINA": 3719665
        }
      }
    },
    "CNY": {
      "03To05Years": {
        "N": {
          "CHINA": 162950484
        }
      }
    },
    "COP": {
      "Above05Years": {
        "N": {
          "COLOMBIA": 323390000
        }
      }
    },
    "EUR": {
      "01To03Years": {
        "Y": {
          "BELGIUM": 393292575
        }
      }
    }
  },
  points = [],
  currencyPoints,
  currencyVal,
  currencyI = 0,
  periodPoints,
  periodI,
  yesOrNoPoints,
  yesOrNoI,
  currency,
  period,
  yesOrNo,
  mil,
  causeMil,
  causeMilI,
  causeName = {
    'N': 'Country Name',
    'Y': 'Country Name'
  };

for (currency in data) {
  if (data.hasOwnProperty(currency)) {
    currencyVal = 0;
    currencyPoints = {
      id: 'id_' + currencyI,
      name: currency,
      color: Highcharts.getOptions().colors[currencyI]
    };

    periodI = 0;

    for (period in data[currency]) {
      if (data[currency].hasOwnProperty(period)) {
        periodPoints = {
          id: currencyPoints.id + '_' + periodI,
          name: period,
          parent: currencyPoints.id
        };
        points.push(periodPoints);
        yesOrNoI = 0;

        for (yesOrNo in data[currency][period]) {
          if (data[currency][period].hasOwnProperty(yesOrNo)) {

            yesOrNoPoints = {
              id: periodPoints.id + '_' + yesOrNoI,
              name: yesOrNo,
              parent: periodPoints.id,
            };
            causeMilI = 0;

            for (mil in data[currency][period][yesOrNo]) {
              if (data[currency][period][yesOrNo].hasOwnProperty(mil)) {

                causeMil = {
                  id: yesOrNoPoints.id + '_' + causeMilI,
                  name: mil,
                  parent: yesOrNoPoints.id,
                  value: Math.round(+data[currency][period][yesOrNo][mil])
                };
                currencyVal += causeMil.value;
                points.push(causeMil);
                causeMilI = causeMilI + 1;
              }
            }

            points.push(yesOrNoPoints);
            yesOrNoI = yesOrNoI + 1;
          }
        }

        periodI = periodI + 1;
      }
    }

    currencyPoints.value = Math.round(currencyVal / periodI);
    points.push(currencyPoints);
    currencyI = currencyI + 1;
  }
}

Highcharts.chart('container', {
  xAxis: {
    events: {
      setExtremes: function(e) {
        $('.ta').val(Math.abs(this.chart.series[0].tree.levelDynamic));
      },
    }
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    allowDrillToNode: true,
    levelIsConstant: false,
    animationLimit: 1000,
    dataLabels: {
      enabled: false
    },
    levelIsConstant: false,

    levels: [{
      level: 1,
      dataLabels: {
        enabled: true
      },
      borderWidth: 3
    }],
    data: points
  }],
  title: {
    text: ''
  }
});

＆＃13;

#container {
  min-width: 300px;
  max-width: 600px;
  margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

<textarea class="ta" name="text" id="text" cols="30" rows="10"></textarea>

<div id="div1" style="display: none; height: 100px; width: 100px; background: blue;"></div>

<div id="div2" style="display: none; height: 100px; width: 100px; background: red;"></div>

<div id="div3" style="display: none; height: 100px; width: 100px; background: yellow;"></div>

＆＃13;

正如您所看到的，当您向下钻取图表的不同级别时，文本区域会更新一个相关的数字，表示您所处的级别。

对于每个不同的级别，我想显示不同的div。

然而，我使用的jQuery是我在这个例子中使用的......

http://jsfiddle.net/pranavcbalan/8mzgj/1/

......似乎不能胜任这项工作。逻辑就在那里 - 如果文本区域的值等于特定数字 - 显示特定的div。但这不会发生。

有谁知道为什么？

非常感谢！:)

修改

这是一个指向JSFiddle的链接，以便于查看：

https://jsfiddle.net/GeorgeBT/z49f6gp4/

Answer 1

使用.change（）而不是.keyup（）。你根本没有触发.keyup（）。

通过

更改值

$('.ta').val(...)

不会触发 .keyup（...）事件处理程序，该事件处理程序在手动键事件上触发。请尝试使用change（...）事件处理程序。

编辑：如果未触发更改事件，请使用

以编程方式触发它

$('.ta').change();

在您的价值更改代码的末尾。

当文本区域等于某个值时显示div

1 个答案: