Question

首先，我已经搜索了几个小时来找到这个...我认为它有一个简单的解决方法，但我对jQuery和Javascript来说真的很新，所以我在这里寻求你的帮助。 / p>

问题我正在使用多个div和jQuery ToggleSlide（）。我希望脚本能够在单击相应的div时找到要打开的正确div。

例如，当我点击div＆＃39; hackandfly＆＃39;时，我希望它打开div＆＃39; hackandfly-open＆＃39;。

代码

$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $slidah = $(this);
    $slidah.slideToggle();
    $('div.project-open').not($slidah).slideUp();
});
});

HTML

<div class="content projects">
        <h3>Projects</h3>
        <div class="project project-big hackandfly">
                <h3>Hack and Fly</h3>
        </div>
        <div class="hackandfly-open project-open" style="display: none;">
            <img src="images/schiphol-logo.png" class="img-project-open"> Proin nec elit ac sapien facilisis ultrices. Integer pellentesque ex a luctus fringilla. Aenean in quam quam. Integer gravida quam eget mauris laoreet hendrerit. Vestibulum feugiat ipsum id.
            <br>
            <br>
            Metus aliquet iaculis. Proin massa justo, maximus in tortor et, Proin massa justo, maximus in tortor et. In aliquam laoreet magna et iaculis. Vestibulum vel orci lobortis, elementum nulla eget, porta eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.
            <br>
            <br>
            Proin massa justo, maximus in tortor et, tincidunt efficitur nibh. Mauris vulputate euismod lorem, vel rutrum ipsum iaculis eu.
        </div>

所以我正在寻找的是，当我推动hackandfly＆＃39; div，＆＃39; scanergy＆＃39; div或者连接食物＆＃39; div，我想让它滑动切换后面有-open的相应div（我有3个div，信息名为hackandfly-open，scanergy-open，connecting-food-open）。

我尝试了一些类似的事情：

$slidah = $(this).after('-open');

还有其他一些东西，但它没有用。谁能帮帮我？

干杯！

Answer 1

使用attr()之类的

$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $slidah = $($(this).attr('class')+'-open');
    $slidah.slideToggle();
    $('div.project-open').not($slidah).slideUp();
});
});

但是，如果您有多个课程，则上述操作会失败。解决方法是将data-*添加到点击的元素，如

<div class="hackandfly other-class" data-class-target="hackandfly-open"></div>

然后

$(document).ready(function() {
    $('.project-open').hide();
    $('.hackandfly, .scanergy, .connecting-food').click(function() {
        $slidah = $('.'+$(this).attr('data-class-target'));
        $slidah.slideToggle();
        $('div.project-open').not($slidah).slideUp();
    });
    });

Answer 2

我会为每个类生成一个唯一的点击处理程序。这样，您可以将所有适用的类名存储在数组中：

// Creates a new unique click function for each class name
function generateClickHandler(className) {
    return function(e) {
        // select the open class here
        $slidah = $('.'+className+'-open');
        $slidah.slideToggle();
        $('div.project-open').not($slidah).slideUp();
    };
}
// Iterate over all the class names and add a new function for each
var clsList = ["hackandfly", "scanergy", "connecting-food"];
$.each(clsList, function(className) {
    $("."+className).click(generateClickHandler(className));
});

Answer 3

使用：

$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $slidah = $("."+$(this).attr('class')+"-open");
    $slidah.slideToggle();
});

Answer 4

如果您在每个部分周围添加了一个包装器，请执行以下操作：

    <div class="content projects">
        <h3>Projects</h3>
        <div class="project-wrapper">
            <div class="project project-big hackandfly">
                    <h3>Hack and Fly</h3>
            </div>
            <div class="hackandfly-open project-open" style="display: none;">
                {...}
            </div>
        </div>
</div>

您可以使用parent和find获取相应的元素，如下所示：

$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $(this).parent().find('.project-open').eq(0).slideToggle();
}

在jQuery中为现有类添加值

4 个答案: