Question

我正在尝试制作文章页面，文章部分可见。

目前我的代码看起来像这样：

<select style="display: none;" name="ms" id="ms" multiple="multiple" >

我想点击查看更多按钮，让jQuery选择以前的.full类。我只是在选择器方面不够先进而不知道如何。

Answer 1

也许这就是你需要的。

$(".seeMore").click(function(){
   alert("See more has been clicked");
   console.log($(this).prev('.full'));
});

Answer 2

选择具有完整类的最后一个元素，

$('.full').last();

Answer 3

$(document).ready(function(){
    $('.seeMore').on('click', function(){
        var fullClass = $(this).prev().html();
        alert(fullClass);
    });

});

我想这可能会对你有所帮助。

http://jsfiddle.net/nbq7prcr/

Answer 4

你可能正在寻找类似的东西：

$(".seeMore").click(function(){
   $this = $(this);
   $this.prev().toggle();
   $this.text( $this.prev().is(':visible') ? 'See Less...' : 'See More...')
});

.full{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article col col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="articleTitle">Your Karate "Blocks" Are Dysfunctional. Here's Why.</div>
  <div class="articleAuthor">
    <p><a href="http://www.karatebyjesse.com/karate-block-real-meaning/" target="_blank">Jesse Ankamp</a>
    </p>
  </div>
  <article class="preview">
    <p class="italic bold">

      “Traditional Karate blocks don’t work against real attacks.”
    </p>
    <p>That’s something I often hear.</p>
    <p class="italic">

      (Especially from people who don’t practice Karate.)
    </p>
    <p>They claim our Karate blocks require too much strength, power, speed, intuition and effort to successfully work against an opponent attacking full force.</p>
    <p>I agree.</p>
  </article>
  <article class="full">
    <p>Some more text</p>
  </article><a class="seeMore btn btn-primary">See More...</a>
  <hr>
</div>

如果您的内容是动态加载的，则需要稍微调整一下：

$(document).on("click", ".seeMore", function(){
   var $this = $(this);
   $this.prev().toggle();
   $this.text( $this.prev().is(':visible') ? 'See Less...' : 'See More...')
});

如果您的HTML布局发生了变化，但每个“完整”元素都会有一个“看到更多”按钮，这种方法会更好：

$(document).on("click", ".seeMore", function(){
   var $this = $(this);
   var cur = $('.seeMore').index($this);
   $('.full').eq(cur).toggle();
   $this.text( $('.full').eq(cur).is(':visible') ? 'See Less...' : 'See More...')
});

Answer 5

：最后一个选择器选择最后一个元素。

注意：此选择器只能选择一个元素。使用：last-child选择器选择多个元素（每个父元素一个）。

$('.classname:last')

选择类的最后一个元素

5 个答案: