切换“更多/更少”文本并仅显示单击的元素

时间：2018-08-13 16:55:32

标签： javascript click

我试图仅选择单击的元素，但是它不起作用。如何切换点击元素的类和文本？

这是我的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>

4 个答案:

答案 0 :(得分：1)

您不必使用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>

答案 1 :(得分：0)

因此，由于我们的类data有多个div，因此我们要同时切换它们。

要解决此问题。点击发生后，我们使用$(this)选择发生点击的按钮，然后使用jquery方法.prev()获取类data的正确div并执行相同的逻辑！ 

$('.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>

答案 2 :(得分：0)

您可以将.prev()与.toggleClass()结合使用：

> cap production deploy
00:00 git:wrapper
      01 mkdir -p /home/u000000000/public_html/tmp
    ✔ 01 u000000000@185.201.11.23 7.806s
      Uploading /home/u000000000/public_html/tmp/git-ssh-storekey_demo-production-francisco.sh 100.0%
      02 chmod 700 /home/u000000000/public_html/tmp/git-ssh-storekey_demo-production-francisco.sh
    ✔ 02 u000000000@185.201.11.23 0.445s
00:09 git:check
      01 git ls-remote git@gitlab.com: xxxxxx .git HEAD
      01 75bb7ded165efb968f00d29808b0673d7517aa41       HEAD
    ✔ 01 u000000000@185.201.11.23 1.438s
00:10 deploy:check:directories
      01 mkdir -p /home/u000000000/public_html/storekey-demo/shared /home/u000000000/public_html/storekey-demo/releases
    ✔ 01 u000000000@185.201.11.23 0.399s
00:12 git:clone
      The repository mirror is at /home/u000000000/public_html/storekey-demo/repo
00:12 git:update
      01 git remote set-url origin git@gitlab.com: xxxxxxx .git
    ✔ 01 u000000000@185.201.11.23 0.465s
      02 git remote update --prune
      02 Fetching origin
    ✔ 02 u000000000@185.201.11.23 1.537s
00:15 git:create_release
      01 mkdir -p /home/u000000000/public_html/storekey-demo/releases/20180813165948
    ✔ 01 u000000000@185.201.11.23 0.455s
      02 git archive master | /usr/bin/env tar -x -f - -C /home/u000000000/public_html/storekey-demo/releases/20180813165948
    ✔ 02 u000000000@185.201.11.23 6.387s
00:23 deploy:set_current_revision
      01 echo "75bb7ded165efb968f00d29808b0673d7517aa41" > REVISION
    ✔ 01 u000000000@185.201.11.23 0.443s
00:24 deploy:build
      01 composer install --no-dev --quiet --optimize-autoloader
    ✔ 01 u000000000@185.201.11.23 6.045s
00:30 deploy:symlink:release
      01 ln -s /home/u000000000/public_html/storekey-demo/releases/20180813165948 /home/u000000000/public_html/storekey-demo/releases/current
    ✔ 01 u000000000@185.201.11.23 25.267s
      02 mv /home/u000000000/public_html/storekey-demo/releases/current /home/u000000000/public_html/storekey-demo
    ✔ 02 u000000000@185.201.11.23 0.421s
00:56 deploy:cleanup
      Keeping 5 of 6 deployed releases on 185.201.11.23
      01 rm -rf /home/u000000000/public_html/storekey-demo/releases/20180813164636
    ✔ 01 u000000000@185.201.11.23 0.543s
00:58 deploy:log_revision
      01 echo "Branch master (at 75bb7ded165efb968f00d29808b0673d7517aa41) deployed as release 20180813165948 by francisco" >> /home/u000000000/publ…

    ✔ 01 u000000000@185.201.11.23 0.530s
00:59 deploy:copy
      Uploading production.env 100.0%

$('.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;
}

答案 3 :(得分：0)

请尝试使用不同的班级名称

jQuery

$（'。click'）。click（function（）{

$("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>
相关问题
最新问题