使用Jquery覆盖热点

Question

我正在尝试用jquery做一个热点覆盖，现在有4个不同的热点可以点击，热点位于100vh的背景图像上。到目前为止，它的功能是，当我单击一个热点时，内容是显示的，但当我单击下一个热点时，前一个热点内容仍然显示。我需要编写某种类型的函数来分隔每个热点。尽管我不知道从何说起。

下面是html：

    <!-- overlay for hotspot on the background-image -->
    <div class="overlay-hotspot" id="hotspot-1">
        <div class="overlay-content">
            <h3 class="white">
                Anna Meyer
            </h3>
            <h4 class="white">
                IT Spezialist, Frontend Teamplayer Lieblingsbuch: Sapiens
            </h4>
        </div>
    </div>
    <div class="overlay-hotspot" id="hotspot-2">
        <div class="overlay-content">
            <h3 class="white">
                Sabrina Schmit
            </h3>
            <h4 class="white">
                DevOps leiter, Frontend Teamplayer Lieblingsbuch: Sapiens
            </h4>
        </div>
    </div>
    <div class="overlay-hotspot" id="hotspot-3">
        <div class="overlay-content">
            <h3 class="white">
                Mathew Stokes
            </h3>
            <h4 class="white">
                Frontend Teamplayer Lieblingsfilm: 300
            </h4>
        </div>
    </div>
    <div class="overlay-hotspot" id="hotspot-4">
        <div class="overlay-content">
            <h3 class="white">
                Franca Hoyer
            </h3>
            <h4 class="white">
                UX/UI Designer, Graphic professional..
            </h4>
        </div>
    </div>

    <!-- end overlay for hotspot -->
    <div class="container-fluid">
        <!--hotspots-->
        <div class="hotspot" id="spot1">
            <div class="pulse"></div>
            <div class="dot"></div>
        </div>

        <div class="hotspot d-none d-lg-block" id="spot2">
            <div class="pulse"></div>
            <div class="dot"></div>
        </div>
        <div class="hotspot d-none d-lg-block" id="spot3">
            <div class="pulse"></div>
            <div class="dot"></div>
        </div>

        <div class="hotspot d-none d-sm-block" id="spot4">
            <div class="pulse"></div>
            <div class="dot"></div>
        </div>
        <!-- hotspots end -->


    // Hotspot functions //
// Hotspot 1 //

$('#spot1').on('click', function () {

  $('#hotspot-1').css("opacity", "1");

  return false

})

$('#people-hotspot').on('click', function () {

  $('.overlay-hotspot').css("opacity", "0");

  return false
});

// hotspot 1 end //

// hotspot 2 //
$('#spot2').on('click', function () {

  $('#hotspot-2').css("opacity", "1");

  return false

});

$('#people-hotspot').on('click', function () {

  $('.overlay-hotspot').css("opacity", "0");

  return false
});


// hotspot 3 start //
$('#spot3').on('click', function () {

  $('#hotspot-3').css("opacity", "1");

  return false

});

$('#people-hotspot').on('click', function () {

  $('.overlay-hotspot').css("opacity", "0");

  return false
});
//hotspot 3 end //

// hotspot 4 start //
$('#spot4').on('click', function () {

  $('#hotspot-4').css("opacity", "1");

  return false

});

$('#people-hotspot').on('click', function () {

  $('.overlay-hotspot').css("opacity", "0");

  return false
});
// hotspot 4 end //


$('.dropdown-toggle').on('click', function () {

  $('.dropdown-menu')
});

Answer 1

    $('#spot1').on('click', function () {

    $('#hotspot-1').css("opacity", "1");
    $('#hotspot-2').css("opacity", "0");
    $('#hotspot-3').css("opacity", "0");
    $('#hotspot-4').css("opacity", "0");

    return false

})
    $('#spot2').on('click', function () {

    $('#hotspot-1').css("opacity", "0");
    $('#hotspot-2').css("opacity", "1");
    $('#hotspot-3').css("opacity", "0");
    $('#hotspot-4').css("opacity", "0");

    return false

})

你能试试这个吗？你拿到了吗？只需对spot 3和spot 4做同样的事情，并相应地更改不透明度值。