单击鼠标，通过将类名从一个元素传递到下一个元素来更改图像

Change image on click of mouse by passing class name from one element to the next

本文关键字：元素 一个 下一个 图像 鼠标 单击      更新时间：2023-09-26

我有一种情况，我想在单击鼠标时更改背景图像。我想从一个element中删除class，并将相同的class添加到下一个element。然后，基于特定的class名称，我想使用jquery执行fadeIn和fadeOut。然而，当我使用class时，只有第一个图像被改变。当我点击第二张图片时，它不会改变。但当我用div替换class时，每次单击时背景图像都会发生变化，直到到达最后一个图像。有人能帮我理解我错过了什么吗。非常感谢。

 $(function(){
    	$("div").not(".active").hide();
    	$(".active").click(function(){ //When I change .active to div, it works. 
    		$(this).fadeOut(function(){
    			$(this).removeClass("active");
    				$(this).next().addClass("active");
    			$(this).next().fadeIn()
    		})
    	})
    })
  body, html{
      height: 100%;
      width:100%;
      background-color: yellow;
    }
    
    #one{
      background:url("../Images/one.jpg") fixed center no-repeat;
      width:100%;
      height: 100%;
    }
    #two{
      background:url("../Images/two.jpg");
      width:100%;
      height: 100%;
    }
    #three{
      background:url("../Images/three.jpg");
      width:100%;
      height: 100%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
       <div  id="one" class="active"></div>
       <div  id="two"></div>
       <div  id="three"></div>
    </body>

您需要使用on()而不是click()，因为您是动态添加类的。

$(function(){
    $("div").not(".active").hide();
    $("body").on('click', '.active', function(){ //When I change .active to div, it works. 
        $(this).fadeOut(function(){
            $(this).removeClass("active");
                $(this).next().addClass("active");
            $(this).next().fadeIn()
        })
    })
})

也许您需要使用.delegate这样更改代码：

   $('body').delegate('.active', 'click', function() {
        $(this).fadeOut(function() {
            $(this).removeClass("active");
            $(this).next().addClass("active");
            $(this).next().fadeIn()
        })
    })

或者在body上更改绑定click以判断e.target

请参阅此处的详细信息delegate

您可以这样做：

  • 首先将特定的类.bg-div添加到这些div中，因为用这个$("div")瞄准ALLdiv是非常通用的，它会隐藏除活动div之外的所有内容，以防您有其他div，它们会被隐藏。

  • 隐藏类为.bg-div的所有div，但具有.active的div除外。

  • 单击事件时，您仍然可以以bg-divdiv为目标，因为只有一个具有.active类，因为所有其他bgDivs都已从上一步中隐藏。fadeOut()这个。

  • 将计数器CCD_ 26增加一。

  • 现在，如果index的值等于bgDivs的长度-数字-，则将coutner重置为0，这是在显示最后一个bg-div时使用的
  • fadeIn()下一个div

jsFiddle 1

$(function() {
  var bgDivs = $(".bg-div"),
    index = 0;
  bgDivs.not(".active").hide();
  bgDivs.on('click', function() {
    $(this).fadeOut('fast');
    index += 1;
    // if the counter value is less than the number of bgDivs, keep this value
    // else, set it to 0 and start over because we're on the last div
    index = (index < bgDivs.length) ? index : 0;
    $(bgDivs[index]).fadeIn('fast');
  });
})
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: yellow;
}
.bg-div {
  width: 100%;
  height: 100%;
}
#one {
  background: url("//dummyimage.com/1000x700?text=one") fixed center no-repeat;
  background-size: cover;
}
#two {
  background: url("//dummyimage.com/1000x700?text=two") fixed center no-repeat;
  background-size: cover;
}
#three {
  background: url("//dummyimage.com/1000x700?text=three") fixed center no-repeat;
  background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="one" class="bg-div active"></div>
  <div id="two" class="bg-div"></div>
  <div id="three" class="bg-div"></div>
</body>

更新1:

您会注意到，在切换背景div时，有一段时间会出现水平滚动条，这是因为这些div堆叠在一起，但当隐藏时没有问题，问题只在切换后台div时出现，要解决此问题，请将这些行添加到.bg-div CSS:

position:absolute;
top:0;
left:0;

jsFiddle 2

更新2:

如果在.bg-divCSS中添加泛型display:none;，然后在#one规则中添加display:block，则可以完全摆脱.active类，而不依赖它。这样你就不需要这条线了：

bgDivs.not(".active").hide();

jsFiddle 3

这很有用，不仅因为代码更少，而且当页面从一开始第一次加载时，除了第一个之外的后台div都会被隐藏，因为它在CSS中，而不是等到js脚本将它们隐藏起来

相关文章：