javascript - 使用 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')
});

标签： javascriptjquery

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

})

你能试试这个吗？你明白了吗？只需对点 3 和 4 执行相同的操作并相应地更改不透明度值。