ImageMapster の野菜トレイの例を使用すると、領域をクリックすると、その領域に関連付けられたテキストがメイン画像の上に表示されます。同じ領域をもう一度クリックすると、領域の選択が解除されますが、メイン画像の上にテキストが残ります。私が必要としているのは、領域をクリックしたときにテキストをオンにし (現在のように)、同じ領域をもう一度クリックするとオフに戻すことです。つまり、強調表示された領域は、それぞれに関連付けられたテキストのオンとオフを切り替えるトグルのように機能する必要があります。
私が作業しようとしている部分は次のとおりです。
onClick: function (e) {
// update text depending on area selected
$('#selections').html(xref[e.key]);
}
追加してみました
$('#selections').toggle();
関数に。これは「トグル」効果を作成しますが、強調表示された領域と「同期」したままにはなりません。クリックした領域に関係なく、テキスト ブロックのオンとオフを切り替えるだけです。
誰かがこれを解決するのを手伝ってもらえますか?