Question

我试图在我的学校项目中创建Show more functionaly。这就是我的网页的样子。

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

这就是我在Jquery所做的，

$('.showMore').click(function(e){
e.preventDefault();
$('.dataShow').show();
});

问题在于，当我点击show more时，它会显示网页上的所有数据（所有div），而不仅仅是单击的数据。

我们怎么能这样做？谢谢你:) This problem is solved by the answers given so far, but pls read the edited question.

Edit:

我们如何在特定div div＆amp;之前定位dataShow在其他dataShow div之前不影响其他div，类似这样，

<div class="newData">Data ...</div>
<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="newData">Data ...</div>
<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="newData">Data ...</div>
<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

我们如何专门针对第一个div newData＆amp; hide（）吗？

Answer 1

使用prev()方法获取前一个元素。

$('.showMore').click(function(e) {
  e.preventDefault();
  // get previous sibling element
  $(this).prev().show();
});

$('.showMore').click(function(e) {
  e.preventDefault();
  $(this).prev().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a> This is what I did in Jquery,

UPDATE：或者根据索引使用eq()（根据索引获取元素）和index()（获取元素索引）方法进行选择。

// cache elements for later reference
var $show = $('.dataShow'),
  $btn = $('.showMore');

$btn.click(function(e) {
  e.preventDefault();
  // get element based on clicked element index 
  $show.eq($btn.index(this)).show();
});

var $show = $('.dataShow'),
  $btn = $('.showMore');
  
$btn.click(function(e) {
  e.preventDefault();
  $show.eq($btn.index(this)).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a> This is what I did in Jquery,

Answer 2

使用this指定要点击的当前元素，然后使用.prev选择上一个元素。

要确保当前.showData是唯一显示的内容，请在选择并显示.showData之前隐藏所有其他.prev()：

$('.showMore').click(function(e){
  e.preventDefault();
  $('.dataShow').hide();
  $(this).prev().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a>

<div class="dataShow" style="display: none">Data ...</div>
<a href="#" class="showMore">read more</a> This is what I did in Jquery,

jQuery：仅选择Clicked元素

2 个答案: