Question

我写了一些代码（在stackoverflow的帮助下），点击时切换两个图像。但是，我希望第二个图像链接到另一个网页（例如App Store）。

当我点击图像时，如果图像总是来回移动，如何添加第二张图像的链接？

jQuery：

<script type="text/javascript">
     $(document).ready(function() {
      $('#slick-toggle').click(function() {
           $('img',this).attr('src', function(i, oldSrc) {
        return oldSrc == 'img/button.png' ? 'img/applestoredownload.png' : 'img/button.png';
           });
               $('#slickbox').toggle(400);
           return false;
          });
      });
</script>

相关HTML：

<div class="co-download-app"> 
    <div class="wrapper">
         <div id="imageContainer">
             <a href="#1" id="slick-toggle">
                 <img src="img/button.png"/>
             </a>
        </div>
    </div>
</div>

我应该在哪里添加只能通过点击第二张图片才能到达的链接？

Answer 1

我猜您的问题是，当您点击包含图片的链接时，图片来源会被更改，下次当您再次点击该链接时，它会重定向到链接href。< / p>

一种解决方案是在首次点击链接后更改代码中的内容以便稍后使用。在这种情况下，我给了一个链接类，下次你点击链接时它会检查它是否有类。如果follow-href类存在，则会跳过剩下的部分，如果不是，则图像源将被更改。

$(document).ready(function() {
    $('#slick-toggle').click(function() {
        if (!$(this).hasClass('follow-href')) {
            var $img = $(this).find("img");
            var src = ($img.attr('src') == 'img/button.png') ? 'img/applestoredownload.png' : 'img/button.png';
            $img.attr('src', src);
            $(this).addClass('follow-href');
            $('#slickbox').toggle(400);
            return false;
        }
    });
});

我更改了一些代码，但结果应该相同，我希望你不要介意。

在Onclick Toggle with Jquery之后添加链接到img

1 个答案: