如何使用jQuery从具有相同类名的许多元素中选择一个特定元素（div）？

时间：2018-01-11 21:32:49

标签： javascript jquery

我遇到了针对具有相同类名的特定div的问题。在下面的代码中，我隐藏了css文件中的所有div，但我在jQuery脚本中显示它们。但是，我不想显示所有这些，而是​​只显示一个特定的div，但我不想使用div的特定ID。我的观点是制作循环，我将旋转哪个div将显示。 

$(document).ready(function(){
  
  let divs = $('.divs');
    
  divs.css('display', 'block');

});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<!DOCTYPE html>
	<html>
		<head>
			<title>Slider Exercise</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>

			<div class="divs" id="div1"></div>
			<div class="divs" id="div2"></div>
			<div class="divs" id="div3"></div>
			<div class="divs" id="div4"></div>
			<div class="divs" id="div5"></div>


			
			<!-- Scripts -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
			<script src="viktor.js"></script>

		</body>
	</html>

4 个答案:

答案 0 :(得分：2)

你的意思是做这样的事情？：

＆＃13;
＆＃13; 
$(document).ready(function(){
  
  let divs = $('.divs');
  let i = 0;

  setInterval(function() {
    divs.hide();
    $(divs[i++]).show();
    if (i >= divs.length)
        i = 0;
  }, 1000);

});
＆＃13; 
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
＆＃13; 
<!DOCTYPE html>
	<html>
		<head>
			<title>Slider Exercise</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>

			<div class="divs" id="div1"></div>
			<div class="divs" id="div2"></div>
			<div class="divs" id="div3"></div>
			<div class="divs" id="div4"></div>
			<div class="divs" id="div5"></div>


			
			<!-- Scripts -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
			<script src="viktor.js"></script>

		</body>
	</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

«我的观点是制作循环，我将旋转显示哪个div。»

这样的东西？

诀窍是隐藏所有.divs。然后根据计数器只显示一个。使用.eq()方法。

$(document).ready(function(){
  
  var i=0;
  var divs = $('.divs');
  
  divs.eq(0).show();
  
  $("#previous,#next").on("click",function(){
  
    divs.hide();
    if( $(this).attr("id")=="next" ){
      i++;
      i = (i>=divs.length) ? 0 : i;
    }else{
      i--;
      i = (i<0) ? divs.length-1 : i;
    }
    console.log(i);
    divs.eq(i).show();
  });

});
#div1 {
  background-color: rgb(246, 210, 88);
}

#div2 {
  background-color: rgb(239, 206, 197);
}

#div3 {
  background-color: rgb(136, 177, 75);
}

#div4 {
  background-color: rgb(151, 213, 224);
}

#div5 {
  background-color: rgb(239, 86, 45);
}

.divs {
  width: 300px;
  height: 300px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="previous">Previous</button>
<button id="next">Next</button>
      
<div class="divs" id="div1"></div>
<div class="divs" id="div2"></div>
<div class="divs" id="div3"></div>
<div class="divs" id="div4"></div>
<div class="divs" id="div5"></div>

答案 2 :(得分：1)

如果您想要更改以设定的间隔随机显示哪个div，您可以使用Math.random()和setInterval功能的组合。

$(document).ready(function(){
  
  var divs = $('.divs');
  var index;
 	
  // runs every second
  setInterval(function(){
    // get a random whole number (may get the same random number consecutively)
  	index = Math.floor(Math.random() * divs.length);
    divs.css('display', 'none');                // hide all divs
  	$(divs[index]).css('display', 'block');   //display random div  
  }, 1000);
});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs" id="div1"></div>
<div class="divs" id="div2"></div>
<div class="divs" id="div3"></div>
<div class="divs" id="div4"></div>
<div class="divs" id="div5"></div>

答案 3 :(得分：-1)

好的，我明白了，这是我的解决方案，有人可能会发现它有用：

$(document).ready(function(){

    
    $('#div1').css('display', 'block');

    $('#previous').click(previousClick);
    $('#next').click(nextClick);

    let divs = $('.divs');
    let counter = 0;

    function previousClick() {

        if (counter > 0) {

            counter--;

            for (let i = 0; i < 5; i++) {
                $(divs[i]).css('display', 'none');
            }
            $(divs[counter]).css('display', 'block');
        } 
    }

    function nextClick() {

        if (counter < 4) {

            counter++;

            for (let i = 0; i < 5; i++) {
                $(divs[i]).css('display', 'none');
            }
            $(divs[counter]).css('display', 'block');
        } 
    }

});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<!DOCTYPE html>
	<html>
		<head>
			<title>Slider Exercise</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>

			<button id="previous">Previous</button>
			<button id="next">Next</button>

			<br>
			<br>

			<div class="divs" id="div1"></div>
			<div class="divs" id="div2"></div>
			<div class="divs" id="div3"></div>
			<div class="divs" id="div4"></div>
			<div class="divs" id="div5"></div>


			
			<!-- Scripts -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
			<script src="viktor.js"></script>

		</body>
	</html>
 

相关问题
最新问题