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

Question

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

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

<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>

有没有简单的方法？ 那是我的小提琴

Answer 1

您可以使用data-*属性，但也可以使用.prev() 。

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

更新的小提琴

或使用data-filter使用基于属性的选择器和.data() ，

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

Answer 2

首先，使用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>

Answer 3

您可以使用.prev()从当前元素引用前一个兄弟元素。

我还想建议您将相关的 dom 元素包含在容器div因为它使DOM易于理解且看起来井井有条。

JS代码：

$(function () {
 $(".button").click(function () {
    $box = $(this).prev('.text'); //get previous sibling
    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)
    });
  });
});

现场演示@JSFiddle：

http://jsfiddle.net/dreamweiver/dw6936L3/8/

Answer 4

您可以简单地将必要的.text div 和按钮包装到单独的 div 中，然后使用siblings来定位正确的文本 div。

http://jsfiddle.net/karanmhatre/dw6936L3/9/

HTML

<div>
    <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>

<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>
    <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>

<div>
    <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>
</div>

JS

$(function(){
    $(".button").click(function(){
        $box = $(this).siblings(".text");
        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)
        });
    });
})

感觉这是一个更干净的解决方案，而不是尝试使用数据过滤器检测它们。