1
複数のパスを持つ4つのSVGがあります。私は別のパネルにこのSVGのコピーを持っています（このSVGはクリックできません）。クリック可能なSVGパスをクリックすると、パスを別の色で塗りつぶします。ラプラスjsパスのクリックイベントをシミュレートします
最初のSVGで色付けされたすべてのパスを2番目のSVGにインポートするボタンを作成しました。そのためには、良いパスでクリックイベントをシミュレートする必要があります。一致するパスを見つけるには、パスの属性d=を使用しています。ここで
は、各パスにイベントを追加するための私のコードです：あなたは私がする4つの方法を試してみました見ることができるように私は、インポートボタン
$('#btn-import').on('click', function() {
$('.tab-pane.active svg path').each(function() {
if ($(this).attr('fill') == '#A8BED5') {
var to_fill = $("#form svg path[d='" + $(this).attr('d') + "']");
// to_fill.trigger('click');
// to_fill[0].trigger('click');
// to_fill.click();
to_fill[0].click();
}
});
});
をクリックしたとき
function buildEvent(regions, area) {
for(var regionName in regions) {
(function (region) {
region.attr(style);
region.node.name = regionName;
region.data('clicked', false);
region[0].addEventListener("mouseover", function() {
if (!region.data('clicked')) region.animate(hoverStyle, animationSpeed);
}, true);
region[0].addEventListener("mouseout", function() {
if (!region.data('clicked')) region.animate(style, animationSpeed);
}, true);
region[0].addEventListener("click", function() {
if (region.data('clicked')) {
region.attr("fill", "#ddd");
region.data('clicked', false);
json_data[area][region.node.name] = false;
}else{
region.attr("fill", "#A8BED5");
region.data('clicked', true);
json_data[area][region.node.name] = true;
}
}, true);
})(regions[regionName]);
}
}
そしてここでは私のコードですクリックイベントをトリガーします。なぜクリックイベントがトリガーされないのかわかりません。私は私の問題を解決し
console.log(to_fill.attr('fill') // output #dddddd