Как я могу щелкнуть элемент в JQuery

Question

Я пытаюсь щелкнуть элемент на круговой диаграмме при наведении на другой элемент, для которого я использую HighChart.Однако при использовании функции наведения мыши при попытке щелкнуть элемент появляется сообщение об ошибке, в котором говорится, что «щелчок не является функцией». В основном, я хочу навести курсор мыши на фрагмент Apple, когда кто-то наводит курсор на тег H1. Вот что я пробовал:

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

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

Answer 2

$ (element) .trigger ('click');

Просмотреть документы здесь: http://api.jquery.com/trigger/