有没有办法缩短这段代码？ 目前它工作正常

Question

这是我的代码。 还有其他方法吗？

 $("._nf-short-ans").on("click", function(){ $(".nf-short-desc").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide"); $(".nf-btn-opt").addClass("nf-hide"); $(".nf-para-c").addClass("nf-hide"); $(".nf-date-c").addClass("nf-hide"); $(".nf-time-c").addClass("nf-hide"); $(".nf-other-c").addClass("nf-hide"); }); $("._nf-para").on("click", function(){ $(".nf-para-c").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide"); $(".nf-btn-opt").addClass("nf-hide"); $(".nf-short-desc").addClass("nf-hide"); $(".nf-date-c").addClass("nf-hide"); $(".nf-time-c").addClass("nf-hide"); $(".nf-other-c").addClass("nf-hide"); }); $("._nf-date").on("click", function(){ $(".nf-date-c").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide"); $(".nf-btn-opt").addClass("nf-hide"); $(".nf-short-desc").addClass("nf-hide"); $(".nf-time-c").addClass("nf-hide"); $(".nf-para-c").addClass("nf-hide"); $(".nf-other-c").addClass("nf-hide"); }); $("._nf-time").on("click", function(){ $(".nf-time-c").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide"); $(".nf-btn-opt").addClass("nf-hide"); $(".nf-short-desc").addClass("nf-hide"); $(".nf-para-c").addClass("nf-hide"); $(".nf-date-c").addClass("nf-hide"); $(".nf-other-c").addClass("nf-hide"); }); $("._nf-multi-choice, ._nf-checkbox").on("click", function(){ $(".nf-para-c").addClass("nf-hide"); $(".nf-main-c").removeClass("nf-hide"); $(".nf-other-c").removeClass("nf-hide"); $(".nf-btn-opt").removeClass("nf-hide"); $(".nf-short-desc").addClass("nf-hide"); $(".nf-date-c").addClass("nf-hide"); $(".nf-time-c").addClass("nf-hide"); });

 .nf-hide { display: none !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row margin-top-10 data-c"> <div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1"> <div class="rdo-wrapper fullwidth" id="opt_1"> <input id="rdo8" type="radio" name="sample4" class="rdo"> <label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8"> <div class="col col-12"> <div class="nf-opt-c"> <div class="nf-input-opt"> <input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1"> <span></span> </div> <div class="nf-aImage-c"> <div class="nf-opt-icon _nf-aImage-opt"></div> </div> <div class="nf-close-c"> <div class="nf-opt-icon _nf-close-opt"></div> </div> </div> </div> </label> </div> </div> <div class="col col-12 margin-top-10 nf-short-desc"> <div class="nf-short-desc-c"> <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text"> <span></span> </div> </div> <div class="col col-12 margin-top-10 nf-para-c nf-hide"> <div class="nf-para-input"> <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text"> <span></span> </div> </div> <div class="col col-12 margin-top-10 nf-date-c nf-hide"> <div class="nf-date-input"> <input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text"> <span></span> </div> </div> <div class="col col-12 margin-top-10 nf-time-c nf-hide"> <div class="nf-time-input"> <input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text"> <span></span> </div> </div> </div> <div class="nf-dropdown"> <div class="nf-select-c"> <div class="nf-default-opt"> <div class="nf-li"> <div class="nf-opt" data-value="nf-multi"> <div class="nf-icon _nf-icon-chk"></div> <div class="nf-p">Multiple Choice</div> </div> </div> </div> <div class="nf-opt-ul"> <div class="nf-li"> <div class="nf-opt _nf-short-ans" data-value="nf-short-ans"> <div class="nf-icon _nf-icon-s-ans"></div> <div class="nf-p">Short Answer</div> </div> </div> <div class="nf-li"> <div class="nf-opt _nf-para" data-value="nf-para"> <div class="nf-icon _nf-icon-para"></div> <div class="nf-p">Paragraph</div> </div> </div> <hr> <div class="nf-li"> <div class="nf-opt _nf-multi-choice" data-value="nf-multi"> <div class="nf-icon _nf-icon-mchoice"></div> <div class="nf-p">Multiple Choice</div> </div> </div> <div class="nf-li"> <div class="nf-opt _nf-checkbox" data-value="nf-check"> <div class="nf-icon _nf-icon-checkbox"></div> <div class="nf-p">CheckBoxes</div> </div> </div> <hr> <div class="nf-li"> <div class="nf-opt _nf-date" data-value="nf-date"> <div class="nf-icon _nf-icon-date"></div> <div class="nf-p">Date</div> </div> </div> <div class="nf-li"> <div class="nf-opt _nf-time" data-value="nf-time"> <div class="nf-icon _nf-icon-time"></div> <div class="nf-p">Time</div> </div> </div> </div> </div> </div>

代码工作得很好。 但是，我在想是否有办法缩短这种 jQuery 代码。

Answer 1

如果按顺序放置可切换元素（显示或隐藏），则可以遍历可点击的.nf-li并使用点击的索引来确定要显示的可切换部分，并隐藏其余部分。

除了.nf-main-c之外，您的可切换部分已经按顺序排列 - 您需要在 HTML 中做的就是将其移到最后，以便它与.data-c > div选择器一起放在最后。

 const toggleableDivs = $('.data-c > div'); $('.nf-li').each(function(i) { $(this).on('click', () => { toggleableDivs.addClass('nf-hide'); toggleableDivs.eq(i).removeClass('nf-hide'); }); });

 .nf-hide { display: none !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row margin-top-10 data-c"> <div class="col col-12 margin-top-10 nf-short-desc"> <div class="nf-short-desc-c"> <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text"> <span></span> </div> </div> <div class="col col-12 margin-top-10 nf-para-c nf-hide"> <div class="nf-para-input"> <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text"> <span></span> </div> </div> <div class="col col-12 margin-top-10 nf-date-c nf-hide"> <div class="nf-date-input"> <input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text"> <span></span> </div> </div> <div class="col col-12 margin-top-10 nf-time-c nf-hide"> <div class="nf-time-input"> <input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text"> <span></span> </div> </div> <div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1"> <div class="rdo-wrapper fullwidth" id="opt_1"> <input id="rdo8" type="radio" name="sample4" class="rdo"> <label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8"> <div class="col col-12"> <div class="nf-opt-c"> <div class="nf-input-opt"> <input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1"> <span></span> </div> <div class="nf-aImage-c"> <div class="nf-opt-icon _nf-aImage-opt"></div> </div> <div class="nf-close-c"> <div class="nf-opt-icon _nf-close-opt"></div> </div> </div> </div> </label> </div> </div> </div> <div class="nf-dropdown"> <div class="nf-select-c"> <div class="nf-default-opt"> <div class="nf-li"> <div class="nf-opt" data-value="nf-multi"> <div class="nf-icon _nf-icon-chk"></div> <div class="nf-p">Multiple Choice</div> </div> </div> </div> <div class="nf-opt-ul"> <div class="nf-li"> <div class="nf-opt _nf-short-ans" data-value="nf-short-ans"> <div class="nf-icon _nf-icon-s-ans"></div> <div class="nf-p">Short Answer</div> </div> </div> <div class="nf-li"> <div class="nf-opt _nf-para" data-value="nf-para"> <div class="nf-icon _nf-icon-para"></div> <div class="nf-p">Paragraph</div> </div> </div> <hr> <div class="nf-li"> <div class="nf-opt _nf-multi-choice" data-value="nf-multi"> <div class="nf-icon _nf-icon-mchoice"></div> <div class="nf-p">Multiple Choice</div> </div> </div> <div class="nf-li"> <div class="nf-opt _nf-checkbox" data-value="nf-check"> <div class="nf-icon _nf-icon-checkbox"></div> <div class="nf-p">CheckBoxes</div> </div> </div> <hr> <div class="nf-li"> <div class="nf-opt _nf-date" data-value="nf-date"> <div class="nf-icon _nf-icon-date"></div> <div class="nf-p">Date</div> </div> </div> <div class="nf-li"> <div class="nf-opt _nf-time" data-value="nf-time"> <div class="nf-icon _nf-icon-time"></div> <div class="nf-p">Time</div> </div> </div> </div> </div> </div>

Answer 2

不是给容器一个唯一的类，比如.nf-date-c ，你可以给它们一个通用的类，比如.nf-container ，然后将其用作选择器。 由于您已经在data-value存储了该选项与哪个容器相关，您可以使用它来选择相应的容器。

<div class="col col-12 margin-top-10 nf-date nf-container">


$('.nf-opt').on('click', function(){
  $('.nf-container').addClass('nf-hide'); //hide everything

  $('.nf-container.' + this.getAttribute('data-value'))
    .removeClass('nf-hide'); //unhide the clicked option
});