如何单击jQuery中的元素

Question

当我将鼠标悬停在另一个要使用HighChart的元素上时，我试图单击饼图上的一个元素。但是，当我尝试单击元素时，在mouseover功能下出现一个错误，提示“单击不是函数”。基本上，当有人将鼠标悬停在H1标签上时，我想将鼠标悬停在Apple Slice上，这是我尝试的操作：

debugger;

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45
    }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 100,
      depth: 45
    }
  },
  series: [{
    name: 'Delivered amount',
    data: [
      ['Bananas', 8],
      ['Kiwi', 3],
      ['Mixed nuts', 1],
      ['Oranges', 6],
      ['Apples', 8],
      ['Pears', 4],
      ['Clementines', 4],
      ['Reddish (bag)', 1],
      ['Grapes (bunch)', 1]
    ]
  }]
});

var ch = document.getElementsByClassName("highcharts-color-4");
var bx = document.getElementById("Apples");
var cv = bx;

if (ch && bx) {
  for (var i = 0; i < ch.length; i++) {
    ch[i].addEventListener("mouseover", mouseOver);
  }
  bx.addEventListener("mouseover", mouseOver);
}

function mouseOver() {
  $("#Apples").css("color", "red");
  var c = document.getElementsByClassName("highcharts-color-4");
  if (c) {
    for (i = 0; i < c.length; i++) {
      c[i].click();
    }
  }
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" style="height: 400px"></div>
<h1 id="Apples">Apples</h1>

这是jsfiddle

的链接

Answer 1

$（element）.trigger（'click'）;

在此处查看文档：{​​{3}}

Answer 2

debugger;

var chart=Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45
    }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 100,
      depth: 45
    }
  },
  series: [{
    name: 'Delivered amount',
    data: [
      ['Bananas', 8],
      ['Kiwi', 3],
      ['Mixed nuts', 1],
      ['Oranges', 6],
      ['Apples', 8],
      ['Pears', 4],
      ['Clementines', 4],
      ['Reddish (bag)', 1],
      ['Grapes (bunch)', 1]
    ]
  }]
});

var ch = document.getElementsByClassName("highcharts-color-4");
var bx = document.getElementById("Apples");
var cv = bx;

if (ch && bx) {
  for (var i = 0; i < ch.length; i++) {
    ch[i].addEventListener("mouseover", mouseOver);
  }
  bx.addEventListener("mouseover", mouseOver);
}

function mouseOver() {
  $("#Apples").css("color", "red");
   chart.series[0].data[0].update(20);
  var c = document.getElementsByClassName("highcharts-color-4");
  if (c) {
    for (i = 0; i < c.length; i++) {
        $(c[i]).trigger("click");
    }
  }
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" style="height: 400px"></div>
<h1 id="Apples">Apples</h1>

使用jquery触发器以便以编程方式$(c[i]).trigger("click");触发事件