javascript - 按数据属性滑入/滑出内容？

Question

我通过单击链接使用简单的 slideIn/Out 脚本。我的问题是，如果我单击一个链接以在内容中滑动，所有其他内容框也会在其内容中滑动，因为没有属性可以用来分隔内容框。所以我认为“数据属性”将是一个好方法？

计划，脚本应该将链接中的“数据属性”与内容中的“数据属性”进行比较:

<div class="button" data-filter="1">Show</div>
<div class="text" data-filter="1">Bla1 bla1 bla1</div>

<div class="button" data-filter="2">Show</div>
<div class="text" data-filter="2">Bla2 bla2 bla2</div>

有没有简单的方法？那是我的fiddle

Answer 1

首先，用attr()得到被点击的属性值.然后在后续选择器中使用它来查找具有该属性值的 .text 元素

var attrVal = $(this).attr('data-filter');
$box = $('.text[data-filter="'+attrVal+'"]');

或者，您可以使用 .prev()喜欢

$box = $(this).prev();

这是可行的，因为这会让您直接进入前面的元素(恰好是 .text)。

$(function(){
    $(".button").click(function(){
        var attrVal = $(this).attr('data-filter');
        $box = $(this).prev();
        minimumHeight = 100;
        
        // get current height
        currentHeight = $box.innerHeight();

        // get height with auto applied
        autoHeight = $box.css('height', 'auto').innerHeight();
        
        // reset height and revert to original if current and auto are equal
        $box.css('height', currentHeight).animate({
            height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
        })
    });
})

.text{
  height:100px;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="text" data-filter="1">bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
</div>
<div class="button" data-filter="1">Show</div><br /><br />

<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><br /><br />

<div class="text" data-filter="2">bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
</div>
<div class="button" data-filter="2">Show</div><br /><br />

<div class="text" data-filter="3">bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
</div>
<div class="button" data-filter="3">Show</div>