如何在 jquery 中单击元素

Question

当我将鼠标悬停在另一个元素上时，我试图单击饼图中的一个元素，为此我正在使用 HighChart。但是，当我尝试单击元素时，在鼠标悬停功能下，我收到一条错误消息，提示“单击不是功能”。基本上，当有人将鼠标悬停在 H1 标签上时，我想将鼠标悬停在 Apple 切片上这是我尝试过的：

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');

在此处查看文档：http://api.jquery.com/trigger/

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");