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

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

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

<强> Updated Fiddle

或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易于理解＆amp;看起来组织得很好。

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)
        });
    });
})

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

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

4 个答案: