Question

我以前从来没有遇到过这个问题，但我试图隐藏/显示基于索引的div。但是，它只适用于第一行，每行只需复制第一行，或者将每个部分计为索引1。

＆＃13;

$(document).ready(function() {
  
  $('.box-highlight').hide();
  
  $('.container .box').click(function() {
    var a = $(this).index();
    
    $('.box').hide();
    $('.box-highlight').eq(a).show();
  });
  
});

＆＃13;

.box {
  height: 5em;
  background: #e5e5e5;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 1</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 2</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 3</h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 4</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 5</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 6</h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 7</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 8</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 9</h4>
      </div>
    </div>
  </div>
</div>

<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 1</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 2</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 3</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 4</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 5</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 6</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 7</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 8</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 9</h2>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

一个简单的

alert(a);

在$(this).index()显示为什么它总是显示第一个：a always = 0

之后

来自index() https://api.jquery.com/index/的文档：

如果没有将参数传递给.index（）方法，则返回值为一个整数，表示第一个元素在其中的位置 jQuery对象相对于其兄弟元素。

由于您的所有<div class='box'>标签都位于不同的col-sm-4中，因此它们没有任何兄弟姐妹，所以总是0（它们是）。

接下来的段落陈述：

如果在元素集合和DOM元素上调用.index（）或传入jQuery对象，.index（）返回一个指示的整数传递元素相对于原始集合的位置。

和

如果选择器字符串作为参数传递，则.index（）返回一个整数，指示jQuery中第一个元素的位置相对于选择器匹配的元素的对象。如果找不到元素，.index（）将返回-1。

因此，您可以将代码更改为：

var a = $(this).index(".container .box");

它工作正常。

以下是应用更改的jsfiddle：https://jsfiddle.net/39kzc3dy/

根据索引隐藏/显示div，无法获得正确的索引

1 个答案: