单击 SVG 以显示图像滑块答案

【问题标题】：Click an SVG to display image slider单击 SVG 以显示图像滑块
【发布时间】：2019-03-12 14:14:56
【问题描述】：

我想将我的 SVG（圆圈）变成按钮，当单击每个不同的圆圈时，我希望显示不同的图像滑块。我该怎么做呢？这是我的代码..

<div id="sidle">
  <img class="image" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" src="img/nelson-street/VORTER.jpg"alt>
  <img class="image" src="img/nelson-street/MAFYA.jpg"alt>
  <img class="image" src="img/nelson-street/nick-walker.jpg"alt>
  <img class="image" src="img/nelson-street/SOKER-VORTER-DREAM.jpg"alt>
</div>

<circle class="circles" id="SmallStreet" fill="#B9C3C6" cx="692" cy="344.4" r="12.7"title="Small Street"/>
    <circle class="circles" id="BellLane" fill="#B9C3C6" cx="721.9" cy="311" r="12.7"title="Bell Lane"/>
    <circle class="circles" id="Quay-NelsonStreet" fill="#B9C3C6" cx="652.3" cy="327.7" r="12.7"title="Quay and Nelson Street"/>

目前我试图在单击按钮时显示图像滑块，但它告诉我滑块未定义。这是代码...

<button onclick="slider()"></button>
<div id="sidle">
  <img class="image" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" src="img/nelson-street/VORTER.jpg"alt>
  <img class="image" src="img/nelson-street/MAFYA.jpg"alt>
  <img class="image" src="img/nelson-street/nick-walker.jpg"alt>
  <img class="image" src="img/nelson-street/SOKER-VORTER-DREAM.jpg"alt>
</div>

$(function slider() {
    var obj = document.getElementById("sidle");
    var i;

    for (i = 0; i < obj.length; i++) {
      if (obj[i].style.display == "none") {
        obj[i].style.display = "block";
      } else {
        obj[i].style.display = "none";
      }
    }
  });

【问题讨论】：

getElementById 返回单个元素，所以不要遍历它。如果您有多个具有相同 ID 的元素，那就是无效的 HTML，并且 DOM 方法也无济于事。此外，您将 slider 函数包装在 jQuery 对象中，这使其成为 document.ready 函数，并且不能按名称调用。如果您要使用 jQuery，请使用 jQuery（即，使用 $('#slider')、.each 和 toggle()。查看一些 jQuery 教程以了解有关如何使这些东西正常工作的更多信息。
谢谢你，我笨到忘了切换功能。

标签： jquery html css svg onclick

【解决方案1】：

这里有两种方法：
第一：
我有两个具有唯一类或 id 的图像，我想在点击圈中显示它们：

 <div id="sidle">
  <img class="image" id="img-SmallStreet" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" id="img-BellLane" src="img/nelson-street/VORTER.jpg"alt>
 </div>
 <circle class="circles" id="SmallStreet" /> 
 <circle class="circles" id="BellLane" />
 <script>
 $(document).ready(function(){
    $("#SmallStreet").click(function(){ $("#img-SmallStreet").fadeIn();  });
    $("#BellLane").click(function(){ $("#img-BellLane").fadeIn();  });
 });
 </script>

或者以更简单更好的方式：

 <div id="sidle">
  <img class="image" id="img-SmallStreet" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" id="img-BellLane" src="img/nelson-street/VORTER.jpg"alt>
 </div>
 <circle class="circles" id="SmallStreet" /> 
 <circle class="circles" id="BellLane" />
 <script>
 $(document).ready(function(){
    $(".circles").click(function(){ 
        $id = $(this).attr('id');
        $("#sidle #"+id).fadeIn();
    });
 });
 </script>

我有很多图片，想滑动它：

 <script>
 $(document).ready(function(){
    let index = 0;
    let lenght = $(".img").length;
    $(".circles").click(function(){ 
        $index = $(this).index();
        $("img").hide();
        $("img").eq($index).fadeIn();
        $index +=1;
        if($index >= length) $index = 0;
    });
 });
 </script>

【讨论】：