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

<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时，我想让它slideToggle相应的div，这个div后面有-open (我有3个div，它的信息叫做hackandfly-open，钪-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();
});