切换 "more/less" 文本并仅显示点击的元素

Question

我正在尝试 select 仅单击的元素，但它不起作用。如何为单击的元素切换 class 和文本？

这是我的fiddle。我应该从以下代码中更改什么？

$('.click').click(function() {
 $('.data').each(function() {
  if ($(this).hasClass('open')) {
      $(this).removeClass('open');
  } else {
    $(this).removeClass('open');
    $(this).addClass('open');
  }
});
   $(this).text( $(this).text() == 'less' ? 'more' : 'less');
});

.container {
  padding: 0;
  width: 100%;
}
.container a {
  display: block;
  padding: 10px;
}
.data {
    background: #fff none repeat scroll 0 0;
    height: 10px;
    overflow: hidden;
}
.data.open {
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">

   <div class="post">
      <div class="data">
        <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

   <div class="post">
      <div class="data">
        <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

</div>

Answer 1

因此，由于我们有多个 div 和 class data，我们将它们都切换。

解决这个问题。单击发生后，我们使用 $(this) select 发生单击的按钮，然后使用 [=30] class data 获得正确的 div =] 方法 .prev() 并执行相同的逻辑！

$('.click').click(function() {

   $(this).prev('.data').each(function() {

    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
    } else {

      $(this).removeClass('open');
      $(this).addClass('open');
    }
  });
   $(this).text( $(this).text() == 'less' ? 'more' : 'less');
});

.container {
  padding: 0;
  width: 100%;
}

.container a {
  display: block;
  padding: 10px;
}

.data {
    background: #fff none repeat scroll 0 0;
    height: 10px;
    overflow: hidden;
}
.data.open {
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

   <div class="post">
      <div class="data">
        <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

   <div class="post">
      <div class="data">
        <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

</div>

Answer 2

您可以组合 .prev() with .toggleClass():

$('.click').on('click', function (e) {
    $(this).prev().toggleClass('open');
    $(this).text(this.textContent == 'less' ? 'more' : 'less');
});

.container {
    padding: 0;
    width: 100%;
}

.container a {
    display: block;
    padding: 10px;
}

.data {
    background: #fff none repeat scroll 0 0;
    height: 10px;
    overflow: hidden;
}

.data.open {
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="post">
        <div class="data">
            <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
        </div>
        <a class="click" href="javascript:void(0);">more</a>
    </div>
    <div class="post">
        <div class="data">
            <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
        </div>
        <a class="click" href="javascript:void(0);">more</a>
    </div>
</div>

Answer 3

请尝试使用不同的 class 名称

jQuery

$('.click').click(函数() {

$("div[class^='data']").each(function() {

 if ($(this).hasClass('open')) {
     $(this).removeClass('open');
 } else {

   $(this).removeClass('open');
   $(this).addClass('open');
 }
});
   $(this).text( $(this).text() == 'less' ? 'more' : 'less');
});

CSS

  .container {
     padding: 0;
     width: 100%;
   }

  .container a {
     display: block;
     padding: 10px;
    }

  .data1, .data2 {
      background: #fff none repeat scroll 0 0;
       height: 10px;
      overflow: hidden;
    }

  .open {
     height: auto;
    }

HTML

   <div class="container">

      <div class="post">
          <div class="data1">
            <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
         </div>
      <a class="click" href="javascript:void(0);">more</a> 
       </div>

       <div class="post">
          <div class="data2">
            <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
          </div>
        <a class="click" href="javascript:void(0);">more</a> 
       </div>

    </div>

Answer 4

您不必使用 each() 循环：

$('.click').click(function() {
  $('.data').removeClass('open');
  $('.click').text('more');

  var data = $(this).prev('.data');

  if ($(this).text() === 'less') {
    $(this).text('more')
    data.removeClass('open');
  } else {
    $(this).text('less')
    data.addClass('open');
  }
});

.container {
  padding: 0;
  width: 100%;
}

.container a {
  display: block;
  padding: 10px;
}

.data {
  background: #fff none repeat scroll 0 0;
  height: 10px;
  overflow: hidden;
}

.data.open {
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="post">
    <div class="data">
      <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
    </div>
    <a class="click" href="javascript:void(0);">more</a>
  </div>

  <div class="post">
    <div class="data">
      <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
    </div>
    <a class="click" href="javascript:void(0);">more</a>
  </div>
</div>

切换 "more/less" 文本并仅显示点击的元素

Toggle "more/less" text and show only clicked element

javascript

click