Question

我正在制作一个带有图像的网站，如果你点击其中一个图像，它应该放大。我通过在jquery

中使用toggleClass函数来做到这一点

我像这样放大了所选图像：

$(".img1, .img2").on('click',function(){
    $(this).toggleClass('enlarged');
});

使用过的课程：

.enlarged{
position:absolute;
z-index:2;
width:500px;
height:600px;
top:-10%;
left:300px;
}

很难解释，但现在发生的事情是，当你点击图像时它会放大。当您单击另一个图像时，它也会放大，但重叠/保持隐藏在另一个放大的图像后面。

我想要发生的是当img1被放大并且用户选择img2时，它应该＆＃34;关闭＆＃34; img1和enlarge img2。

谢谢：）

更新

它现在几乎不起作用，它在垃圾邮件点击后打开，一旦放大我可以再次最小化它。但是我不能再扩大它了。

有人可以帮我吗？

<script>
    $(document).ready(function() {
        $("#header").load("header.html .header");
        $("#footer").load("footer.html .footer");

        $("body").on('click', function(){

            if(!$(".img1, .img2").hasClass('enlarged')){

                $(".img1, .img2").on('click',function(){
                    $(this).addClass('enlarged');
                });
            }else{
                $("body").on('click', '.enlarged', function(){
                    $(this).removeClass('enlarged');
                });
            }

        });
    });
</script>

Answer 1

为所有可点击的图片添加通用类，例如“gallery”

然后

$(".gallery").on('click',function(){
    //removes enlarged class from all images
    $(".gallery.enlarged").removeClass('enlarged');
    //adds enlarged class to clicked image
    $(this).addClass('enlarged');
});

Answer 2

您可以执行以下操作。这将删除enlarged类。然后将其添加到您单击的图像中。（见jsfiddle here）

$(".img1, .img2").on('click', function() {

  $(".img1, .img2").removeClass("enlarged");
  $(this).toggleClass('enlarged');

});

见下面的工作示例：

＆＃13;

$(".img1, .img2").on('click', function() {
  $(".img1, .img2").removeClass("enlarged");
  $(this).toggleClass('enlarged');
});

＆＃13;

.enlarged {
  position: absolute;
  z-index: 2;
  width: 500px;
  height: 600px;
  top: -10%;
  left: 300px;
}

label {
  font-weight: bold;
}

input[type=text] {
  width: 20em
}

p {
  margin: 1em 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="https://placehold.it/350x150" alt="image" />
<img class="img2" src="https://placehold.it/350x150/F2F5A9" alt="image" />

＆＃13;

Answer 3

如果你想只有一个＆＃34;放大＆＃34;对于你点击的img的类，我认为最简单的是删除所有＆＃34;放大＆＃34; class然后为正确的元素添加类：

UPDATE [dbo].[mytable]
  SET string = 'kkk' + REPLACE(string, 'a','')

放大一张照片点击

3 个答案: