Question

我有一个关于不乘以jquery函数的问题：

我写了一段代码：

$(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，任何想法都会更容易吗？提前谢谢

Answer 1

尝试下面的代码。将滚动值指定为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>

Answer 2

请参阅@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/' />

<强> JS

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

为不同的div乘以jquery函数（一个函数有多个div）

2 个答案: