可以简化以下jQuery代码吗？

时间：2017-03-28 11:24:39

标签： jquery html css

我创建了6个按钮并使用jQuery我可以在点击每个按钮时获取数据块。我想知道编写的jQuery代码是否可以最小化？如何实现最小化的代码？

＆＃13;
＆＃13; 
$("#button1").click(function() {
  $("#text1").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text1").hide();
  });
});

$("#button2").click(function() {
  $("#text2").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text2").hide();
  });
});

$("#button3").click(function() {
  $("#text3").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text3").hide();
  });
});

$("#button4").click(function() {
  $("#text4").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text4").hide();
  });
});

$("#button5").click(function() {
  $("#text5").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text5").hide();
  });
});

$("#button6").click(function() {
  $("#text6").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text6").hide();
  });
});
＆＃13; 
#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2"> Button_2 </button>
  </div>

  <div>
    <div class="block" id="text3">
      <h1> Button3 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button3"> Button_3 </button>
  </div>

  <div>
    <div class="block" id="text4">
      <h1> Button4 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button4"> Button_4 </button>
  </div>

  <div>
    <div class="block" id="text5">
      <h1> Button5 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button5"> Button_5 </button>
  </div>

  <div>
    <div class="block" id="text6">
      <h1> Button6 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button6"> Button_6 </button>
  </div>

  <div>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

$("button.button").click(function() {
  $(this).prev('.block').show();
  $(".close").show();
  
});



$(".close").click(function() {
    $(".block:visible").hide();
  });
#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}

.button{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1" class="button"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2" class="button"> Button_2 </button>
  </div>

  <div>
    <div class="block" id="text3">
      <h1> Button3 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button3" class="button"> Button_3 </button>
  </div>

  <div>
    <div class="block" id="text4">
      <h1> Button4 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button4" class="button"> Button_4 </button>
  </div>

  <div>
    <div class="block" id="text5">
      <h1> Button5 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button5" class="button"> Button_5 </button>
  </div>

  <div>
    <div class="block" id="text6">
      <h1> Button6 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button6" class="button"> Button_6 </button>
  </div>

  <div>

  1. 为每个按钮添加一个公共类
  2. 使用此上下文告知点击的按钮
  3. 使用prev()获取需要显示的上一个div
  4. 使用选择器.block:visible选择要隐藏的可见块

答案 1 :(得分：0)

您可以使用以下jQuery代码

$("button").click(function() {
    $(this).prev().show()
    $(this).prev().find('.close').show()
});

$(".close").click(function() {
    $(this).closest('.block').hide();
});

答案 2 :(得分：0)

最简单 - 不更改类名：

$("button").click(function() {
  if ($(this).is(".close")) $(this).closest('.block').hide();
  else {
    $(this).prev().show();
    $(this).prev().find('.close').show();
  }
});
#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2"> Button_2 </button>
  </div>


  <div>

答案 3 :(得分：0)

尝试以下方法：

$('button').click(function() {
    $(this).prev('.block').show();
    $(this).prev('.block').find('.close').show();
});

$('.close').click(function() {
    $(this).parents('.block').hide();
});

答案 4 :(得分：-1)

可能封装在可重用的函数中。

customFn("button1","text1","close");
customFn("button2","text2","close");
customFn("button3","text3","close");

function customFn(buttonId,textId,closeClass){
  $("#"+buttonId).unbind("click").bind("click",function() {
      $("#"+textId).show();
      $("."+closeClass).show();
      $("."+closeClass).unbind("click").bind("click",function() {
          $("#"+textId).hide();
    });
  });
 }

 //unbind("click").bind("click" prevents unnecessary events as stated in the comments
相关问题
最新问题