Question

除了第一个div，我需要隐藏所有具有相同类名的div。然后每个按钮单击我必须在js中逐个启用其他div。

<head>
</head>

<body>

    <div class ="TextDiv">1</div>
    <div class ="TextDiv">2</div>
    <div class ="TextDiv">3</div>
    <div class ="TextDiv">4</div>
    <div class ="TextDiv">5</div>
 <input type="submit" value="Show more" onClick>

<script>
function myFunction() {

}
</script>
</body>

Answer 1

：not（selector）选择器匹配不是指定元素/选择器的每个元素。试试这个代码：

 "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2"
}

Answer 2

隐藏所有内容，

$('.TextDiv').hide();

然后显示第一个。

$('.TextDiv').eq(0).show();

对于点击，您必须查找最后一个可见项目，并找到它的下一个兄弟

$('.TextDiv:visible:last').next().show();

$('.TextDiv').hide();
$('.TextDiv').eq(0).show(); 


$('button').on('click', function(){

  $('.TextDiv:visible:last').next().show(); 

});

.TextDiv {
   margin-bottom:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class ="TextDiv">1</div>
    <div class ="TextDiv">2</div>
    <div class ="TextDiv">3</div>
    <div class ="TextDiv">4</div>
    <div class ="TextDiv">5</div>
<button type="button">Show more</button>

在js中隐藏并启用具有相同类名的Div集

2 个答案: