javascript - 为 jQuery 中的现有类添加值

Question

首先，我已经搜索了好几个小时才找到这个..我认为它有一个简单的修复方法，但我对 jQuery 和 Javascript 真的很陌生，所以我来这里寻求你的帮助。

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

例如，当我单击 div 'hackandfly' 时，我希望它打开 div 'hackandfly-open'。

代码

$(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”div、“scanergy”div或“connecting-food”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();
    });
    });