增值現有類jQuery的

編輯 - 包括其中的問題是可視化的頁面 - http://www.openmindedmedia.nl/testfase/julius/增值現有類jQuery的

首先，我已搜查相當長的一段時間來找到這個..我相信它有一個簡單的辦法但我對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或'連接食物'div，我希望它滑動切換相應的div，在它後面打開（我有3個div，信息名爲hackandfly-open，scanergy-open，connecting-food-open）。

我試着像一些事情：

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

和其他一些東西，但沒有奏效。誰能幫我？

乾杯！

來源

2015-06-22 juuljuup

您點擊的div是否也有_other_類？ –

在問題中添加HTML代碼 – Tushar

你能修改你的HTML，還是被鎖定？ – gaynorvader

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

來源

2015-06-22 12:58:00 AmmarCSE

感謝您的回覆！但不幸的是，它不起作用。見鏈接 – juuljuup

@ user1291146，你可以嘗試我的第二個建議（使用'data- *'屬性）？ – AmmarCSE

你先生，是老闆！對於快速回復（給所有人）非常感謝，從不使用本網站，回覆率是...快！它的工作原理。謝謝！ – juuljuup

用途：

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

來源

2015-06-22 13:00:31

感謝您的回覆，但這似乎不起作用。查看爲視覺反饋提供的新鏈接 – juuljuup

這是一個開始，但只有點擊元素具有一個類時纔會起作用。 – blex

我會爲每一個類唯一的點擊處理程序。這樣的話，你可以將所有適用的類名保存在一個數組：

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

來源

2015-06-22 13:00:48 CodingIntrigue

如果添加了周圍像這樣各部分的包裝：

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

來源

2015-06-22 13:21:24 gaynorvader

增值現有類jQuery的

回答

相關問題