有没有办法将颜色点链接到具有不同图例的字典？

<div id="dictionary">
  <div class="entry">
    <div class="legend"></div>
    <span class="term">Term 1</span>
    <span class="definition">Definition 1</span>
  </div>
  <div class="entry">
    <div class="legend"></div>
    <span class="term">Term 2</span>
    <span class="definition">Definition 2</span>
  </div>
  <!-- 其他字典条目 -->
</div>

.legend {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}

.legend.term1 {
  background-color: red;
}

.legend.term2 {
  background-color: blue;
}

/* 其他图例样式 */

var entries = document.getElementsByClassName('entry');

for (var i = 0; i < entries.length; i++) {
  var legend = entries[i].getElementsByClassName('legend')[0];
  var term = entries[i].getElementsByClassName('term')[0];
  
  // 添加链接
  legend.addEventListener('click', function() {
    // 根据需要执行相应的操作，例如跳转到其他页面或显示更多信息
    console.log('Clicked on legend for term: ' + term.textContent);
  });
}