добавить значение к существующему классу в JQuery

Question

EDIT - включена страница, где визуализируется проблема - http://www.openmindedmedia.nl/testfase/julius/

Прежде всего, я искал довольно несколько часов, чтобы найти это .. Я предполагаю, что это имеет легко исправить но я действительно новичок в 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 или ' connect-food 'div, я хочу, чтобы он скользил по соответствующему div, который имеет -открывается за ним (у меня есть 3 divs с информацией, называемой hackandfly-open, scanergy-open, connect-food-open).

Я пробовал некоторые вещи, как:

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

и некоторые другие вещи, но это не сработало. Кто может мне помочь?

Cheers!

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

Использование:

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

Answer 3

Я бы генерировать уникальный обработчик щелчка для каждого класса. Таким образом, вы можете хранить все применимые имена классов в массиве:

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