Question

我有html这样的代码

<div class="main">
    <div class="button hide">1</div>
    <div class="button hide">2</div>
    <div class="button hide">3</div>
    <div class="button hide">4</div>
    <div class="button hide">5</div>
    <div class="button hide">6</div>
    <div class="button hide">7</div>
 ..........
</div>
<a href="#" class="input">ZZZ</a>

我想在点击display:block之后将样式ZZZ添加到前五个按钮（在这种情况下为1,2,3,4,5）再次如果我点击按钮ZZZ我想先隐藏5个按钮，将样式display:block添加到6,7,8,9,10

我可以想到这里，但我们知道风格适用于所有元素。是否可以仅为前五个按钮添加它？

$(".input").click(function(){
    $(.button).css("display","block");
});

谢谢：）

Answer 1

您可以使用:lt伪选择器来选择第一个n元素。

选择匹配集内索引小于索引的所有元素。

＆＃13;

$('.input').on('click', function() {
  $('.button:lt(5)').removeClass('hide');
  return false;
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main">
  <div class="button hide">1</div>
  <div class="button hide">2</div>
  <div class="button hide">3</div>
  <div class="button hide">4</div>
  <div class="button hide">5</div>
  <div class="button hide">6</div>
  <div class="button hide">7</div>
  ..........
</div>
<a href="#" class="input">ZZZ</a>

＆＃13;

修改

要在5索引之后选择元素，可以使用:gt伪选择器。

选择匹配集中索引大于索引的所有元素。

＆＃13;
＆＃13;
$('.input').on('click', function() { $('.button:gt(4)').removeClass('hide'); return false; });
＆＃13;
.hide { display: none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="main"> <div class="button hide">1</div> <div class="button hide">2</div> <div class="button hide">3</div> <div class="button hide">4</div> <div class="button hide">5</div> <div class="button hide">6</div> <div class="button hide">7</div> .......... </div> <a href="#" class="input">ZZZ</a>
＆＃13;
＆＃13;
＆＃13;

Answer 2

FIDDLE

$(".input").click(function(){
    $('.main').find('.notblock').css("display","none");
});

html

<div class="main">
 <div class="button hide">1</div>
 <div class="button hide">2</div>
 <div class="button hide">3</div>
 <div class="button hide">4</div>
 <div class="button hide">5</div>
 <div class="button hide notblock">6</div>
 <div class="button hide notblock">7</div>
 ..........
</div>
<a href="#" class="input">ZZZ</a>

将类添加到您想要不在选择范围内的div中，然后使用该类选择它们。在这个示例中，我将notblock添加到6和7 div，然后使用该类选择它们以向他们添加display none

UPDATE

FIDDLE

$(".input").click(function () {
    $('.main').find('.notblock').toggle();
    $('.main').find('.hide').toggle();
});

html

<div class="main">
    <div class="button hide">1</div>
    <div class="button hide">2</div>
    <div class="button hide">3</div>
    <div class="button hide">4</div>
    <div class="button hide">5</div>
    <div class="button notblock">6</div>
    <div class="button notblock">7</div>
    <div class="button notblock">8</div>
    <div class="button notblock">9</div>
    <div class="button notblock">10</div>..........</div>
<a href="#" class="input">ZZZ</a>

UPDATE

根据@Tushar建议将selector从$('.main').find('.notblock').toggle(); $('.main').find('.hide').toggle();缩短为$('.main').find('.notblock, .hide').toggle();

Answer 3

jQuery .show（）和.hide（）函数已经在元素中添加了display：block和display：none。

如果你需要在前5和其他之间进行一些切换：

$('.input').on('click', function() {
    if($('.button:eq(0)').is(":visible")){
        $('.button:gt(4)').show();
        $('.button:lt(5)').hide();
    }else{
        $('.button:lt(5)').show();
        $('.button:gt(4)').hide();
    }
  return false;
});

使用Jquery单击按钮后，在前5个元素上添加样式

3 个答案: