2014-12-22 2 views
0

Могу ли я объединить эти две функции jQuery в один? У них такой же селектор, и он выглядит как сокращенный или упрощенный. Я просто начинаю изучать jquery, поэтому не знаю, как это сделать. Может кто-то помочь? БлагодаряМогу ли я объединить эти две функции в один

$(function(){ 
 
\t $(".button").click(function(){ 
 
    var box=$(this).find("a").attr("href"); 
 
\t 
 
    return false; 
 
}); 
 
    $(".button").on('click',function(){ 
 
\t var box=$(this).attr('data-box'); 
 
\t $('#'+box).toggle(); 
 
\t  
 
    }); 
 
});
.panel{ width: 80px;height: 25px; background: tan; display: inline-block;position:absolute; 
 
\t } 
 
.panel p{ margin: 0px 0px 10px 10px; 
 
\t } 
 
.button{ width: 30px;height: 30px; background: pink; display: inline-block; margin-bottom: 30px; 
 
\t } 
 
#box1 {top:50px;left:20px; display: none;} 
 
#box2 {top:50px;left:120px;display: none;} 
 
#box3 {top:50px;left:220px;display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="button" data-box="box1" >A 
 
</div> 
 
<div class="button" data-box="box2"> B 
 
</div> 
 
<div class="button" data-box="box3"> C 
 
</div> 
 
<div id="nav"> 
 
\t <div id="box1" class="panel "> 
 
\t \t <p>content</p> 
 
\t </div> 
 
\t <div id="box2" class="panel "> 
 
\t \t <p>content</p> 
 
\t </div> 
 
\t <div id="box3" class="panel"> 
 
\t \t <p>content</p> 
 
\t </div> 
 
</div>

+0

первый один не делает ничего, что он, как ожидается, делать? – charlietfl

+0

@ charlietfl first one для того, чтобы сделать div clickable. –

+0

Прошу прощения, но это не имеет смысла. Не знаю, что означает 'make div clickable' означает – charlietfl

ответ

1

Я не понимаю, почему нет.

$(function(){ 
     $(".button").click(function(){ 
    var box=$(this).find("a").attr("href"); 

    var box=$(this).attr('data-box'); 
     $('#'+box).toggle(); 

    return false; 
    }); 
}); 

Просто не забудьте переместить return false в конец.

+0

Не считаете ли вы, что 'return false', будет пропускать нижний раздел кода? – Runcorn

+0

Хорошо, я никогда не возвращался к голосованию: D – Runcorn

1

Я не уверен, правильно ли получил этот вопрос, но я думаю, что ваш ответ;

$(function(){ 
     $(".button").click(function(){ 
    var box=$(this).find("a").attr("href"); 

var box1=$(this).attr('data-box'); 
     $('#'+box1).toggle(); 
    return false; 
}); 
0
$(function() { 
     $(".button").click(function() { 
     var url = $(this).find("a").attr("href"); 

     var box = $(this).attr('data-box'); 
     $('#' + box).toggle(); 

     return false; 
     }); 
); 

Я не уверен, что первая переменная должна делать (он никогда не используется), но я оставил его там в любом случае.

0

У вас нет никаких якорей в вашем HTML, поэтому мне кажется, что ваша первая функция не требуется, поэтому код, который я хотел бы предложить:

$(function() { 
    $(".button").on('click',function(){ 
     var box=$(this).attr('data-box'); 
     $('#'+box).toggle(); 

    }); 
}); 
Смежные вопросы