Question

我正在寻找一种在Jquery中编写动态代码的方法。

请在下面查看这些代码，这是其jsfiddle

一切正常，但是Jquery代码重复并且有点长！有什么办法可以将这个Jquery变成动态的。

谢谢！

HTML

<div class="tabs" id="tab-part1">Part 1</div>
<div class="tabs" id="tab-part2">Part 2</div>
<div class="tabs" id="tab-part3">Part 3</div>
<div class="tab-parts">
<div id="part1">
This is part 1
</div>
<div id="part2">
This is part 2
</div>
<div id="part3">
This is part3
</div>
</div>

JS

 $(function () {
     $('#tab-part1').click((event) => {
        $(this).find('.tab-parts #part2, .tab-parts #part3').hide();
        $(this).find('.tab-parts #part1').show();
     });
     $('#tab-part2').click((event) => {
        $(this).find('.tab-parts #part1, .tab-parts #part3').hide();
        $(this).find('.tab-parts #part2').show();

     });
     $('#tab-part3').click((event) => {
        $(this).find('.tab-parts #part1, .tab-parts #part2').hide();
        $(this).find('.tab-parts #part3').show();
     });
 });

Answer 1

这看起来如何？

     $(function () {
         $(".tabs").click(function(e) {
           var target = $(this).data("target");
           $("#" + target).show();
           $(".tab-parts").children().not("#" + target).hide();
         });
     });

.tabs {
  font-size: 20px;
  font-weight: bold;
  margin-right: 60px;
  float: left;
}

#part2, #part3 {
  display: none
}
.tab-parts {
  width: 100%;
  float:left;
  margin-top: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs" data-target="part1">Part 1</div>
<div class="tabs" data-target="part2">Part 2</div>
<div class="tabs" data-target="part3">Part 3</div>
<div class="tab-parts">
<div id="part1">
This is part 1
</div>
<div id="part2">
This is part 2
</div>
<div id="part3">
This is part3
</div>
</div>

Answer 2

这是我的观点，基于 not 更改您的html结构。更改html结构可能会更好。

http://jsfiddle.net/Ldfqhm1k/

HTML

<div class="tabs" id="tab-part1">Part 1</div>
<div class="tabs" id="tab-part2">Part 2</div>
<div class="tabs" id="tab-part3">Part 3</div>
<div class="tab-parts">
<div id="part1">
This is part 1
</div>
<div id="part2">
This is part 2
</div>
<div id="part3">
This is part 3
</div>
</div>

CSS

.tabs {
  font-size: 20px;
  font-weight: bold;
  margin-right: 60px;
  float: left;
}

#part2, #part3 {
  display: none
}
.tab-parts {
  width: 100%;
  float:left;
  margin-top: 20px
}

JS

 $(function () {
     $('div[id^="tab-part"]').on('click',function(e){
        var part = $(this).attr('id').split('-')[1];
        $('.tab-parts [id^="part"]').hide();
        $('.tab-parts #'+part).show();
     });
 });

编写动态JQuery

2 个答案: