Question

我可以将这两个jQuery函数合并为一个吗？他们有相同的选择器，它看起来可以缩短或简化。我刚开始学习jquery所以不知道该怎么做。可以有人帮忙吗？感谢

＆＃13;

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

＆＃13;

.panel{ width: 80px;height: 25px; background: tan; display: inline-block;position:absolute;
	}
.panel p{ margin: 0px 0px 10px 10px;
	} 
.button{ width: 30px;height: 30px; background: pink; display: inline-block; margin-bottom: 30px;
	}
#box1 {top:50px;left:20px; display: none;}
#box2 {top:50px;left:120px;display: none;}
#box3 {top:50px;left:220px;display: none;}

＆＃13;

<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">
	 <div id="box1" class="panel ">
		<p>content</p>
	</div>
	<div id="box2" class="panel ">
		<p>content</p>
	</div>
	<div id="box3" class="panel">
		<p>content</p>
	</div>
</div>

＆＃13;

Answer 1

我不明白为什么不。

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

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

     return false;
   });
 });

请务必将return false移至最后。

Answer 2

我不确定我的问题是否正确，但我想你的回答是;

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

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

Answer 3

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

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

        return false;
      });
);

我不确定第一个变量应该做什么（它永远不会被使用），但无论如何我把它留在那里。

Answer 4

你的html中没有任何锚点，因此在我看来你不需要你的第一个函数，因此我建议的代码是：

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

    });
});

我可以将这两个功能合二为一

4 个答案: