可以重构此功能吗？

Question

我有一篇文章，上面有一些弹出窗口（热点）。我需要单击它以添加可见的类。在这篇文章中，我必须仅显示一个热点。

function calloutHandler("article") {
  var $hotspotIcon = $slot.find('.hotspot-icon');

  $hotspotIcon.each(function(index, el) {
    var dataVal = $(this).attr('data-val'),
      $hotspotCallout = $slot.find('[data-val=' + dataVal + '].hotspot');

    $(el).on("click", function() {
      var doesvisible = $hotspotCallout.hasClass("visible");

      $slot.find('.item.hotspot').removeClass("visible");
      doesvisible ? null : $hotspotCallout.addClass("visible");
    });
  });
}

<article>
<div class="hotspot-icon" data-val="123"></div>
<div class="item hotspot" data-val="123"></div>
</article>

我将重构此功能，找不到其他解决方案。你有建议吗？