倍增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）

回答

相关问题