倍增jQuery的功能（一個功能很多的div）

我有一個關於不乘以jQuery函數問題：倍增jQuery的功能（一個功能很多的div）

我寫了代碼：

$(document).ready(function(){ 

$("#pic1").click(function(){ 
    $("#content1").fadeIn(1500);}); 
$("#pic2").click(function(){ 
    $("#content2").fadeIn(1500);}); 
$("#pic3").click(function(){ 
    $("#content3").fadeIn(1500);}); 
})

我不能添加類，因爲當我點擊一個div我想淡入另一個div（但只有一個）

是否可以寫得更容易，特別是我有50圖片和50內容;

和第二有點類似的問題：

我有一個代碼：

$(document).ready(function(){ 

$("#obraz1").click(function(){ 
$('html, body').animate({scrollTop:450}, 1500);}); 
$("#obraz2").click(function(){ 
$('html, body').animate({scrollTop:450}, 1500);}); 
$("#obraz3").click(function(){ 
$('html, body').animate({scrollTop:450}, 1500);}); 
$("#obraz4").click(function(){ 
$('html, body').animate({scrollTop:730}, 1500);}); 
$("#obraz5").click(function(){ 
$('html, body').animate({scrollTop:730}, 1500);}); 
$("#obraz6").click(function(){ 
$('html, body').animate({scrollTop:730}, 1500);}); 
$("#obraz7").click(function(){ 
$('html, body').animate({scrollTop:1000}, 1500);}); 
$("#obraz8").click(function(){ 
$('html, body').animate({scrollTop:1000}, 1500);}); 
$("#obraz9").click(function(){ 
$('html, body').animate({scrollTop:1000}, 1500);}); 
})

同樣的問題 - 任何主意，這樣做很容易，如果我有50-70的div？在此先感謝

來源

2015-03-13 Łukasz Bogocz

給他們相同的類和目標類，使用foreach並利用這個關鍵字定位準確一個被點擊。 – floor 2015-03-13 14:33:55

您無法添加課程的原因無效。我建議添加一個類到相關的元素。然後在這些html元素上，你還可以添加數據屬性，你可以使用jQuery的'.data（）'函數獲取數據屬性。或者，因爲您只是在後續觸發器中更改數字，您可以使用元素索引來引用您想要做的東西，仍然使用類。這裏不需要循環。 – Novocaine 2015-03-13 14:34:27

@ŁukaszBogocz請檢查我的回答 – 2015-03-13 15:17:17

見@Nishit Maheta的回答第二個問題。

至於第一個問題，你可以做到以下幾點;

DEMO

HTML

<div class='pic_click'>1</div> 
<div class='pic_click'>2</div> 
<div class='pic_click'>3</div> 
<div class='pic_click'>4</div> 
<div class='pic_click'>5</div> 

<br /> 

<img id='content1' src='http://lorempixel.com/300/200/sports/' /> 
<img id='content2' src='http://lorempixel.com/300/200/nightlife/' /> 
<img id='content3' src='http://lorempixel.com/300/200/food/' /> 
<img id='content4' src='http://lorempixel.com/300/200/city/' /> 
<img id='content5' src='http://lorempixel.com/300/200/cats/' />

$('.pic_click').on('click', function() { 
    $('#content' + ($(this).index() + 1)).fadeIn(1500); 
});

來源

2015-03-13 14:59:02 Novocaine

不幸的是，它不適用於divs = content1，content2等;對於img完美地工作;） – 2015-03-13 15:22:25

@ŁukaszBogocz它''div's幾乎完全相同[看這個小提琴]（http://jsfiddle.net/49pqnn09/） – Novocaine 2015-03-13 15:28:04

嘗試使用以下代碼。將滾動值分配爲div的屬性。見DEMO上FIDDLE

$(document).ready(function({ 
    $("div[id^='obraz']").click(function(){ 
    $('html, body').animate({scrollTop:$(this).attr('data-scroll')}, 1500); 
    }); 

    $("div[id^='pic']").click(function(){ 
     $("#content"+$(this).attr('data-index')).fadeIn(1500); 
    }); 
}); 

<div id="obraz1" data-scroll="450"> val1 </div> 
<div id="obraz2" data-scroll="750"> val1 </div> 
<div id="obraz3" data-scroll="1000"> val1 </div> 

<div id="pic1" data-index="1"> val1 </div> 
<div id="pic2" data-index="2"> val1 </div> 
<div id="pic3" data-index="3"> val1 </div>

來源

2015-03-13 14:36:09

倍增jQuery的功能（一個功能很多的div）

回答

相關問題