有没有办法缩短这个jQuery代码？

Question

是否有任何替代方法可以缩短此代码？ 它工作正常，但我在想是否有任何方法可以缩短它。

function hideElem() {
  $("._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").addClass("nf-hide");
  });

  $("._nf-para").on("click", function() {
    $(".nf-para").removeClass("nf-hide");
    $(".nf-main-c").addClass("nf-hide");
    $(".nf-btn-opt").addClass("nf-hide");
    $(".nf-short-desc").addClass("nf-hide");
  });

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

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

Answer 1

首先，如果您使用事件委托，您只需要一个处理程序。 此外，您可以在 JQuery 中使用多个选择器。 就像是：

 document.addEventListener("click", handle); function handle(evt) { const origin = evt.target; if (origin.classList.contains("_nf-short-ans") { $(".nf-short-desc").removeClass("nf-hide"), return $(".nf-main-c, .nf-btn-opt, .nf-para") .addClass("nf-hide"); } if (origin.classList.contains("._nf-para") { $(".nf-para").removeClass("nf-hide"); return $(".nf-main-c, .nf-btn-opt, .nf-short-desc") .addClass("nf-hide"); } /* etc. */ }

Answer 2

这是我的温和建议，您可以尝试一下。 toggleClass 部分可能很棘手。

function hideElem() {  
  $("._nf-short-ans, ._nf-para").on("click", function() {
    $(".nf-btn-opt, .nf-main-c").addClass("nf-hide");
    $(".nf-para, .nf-short-desc").toggleClass("nf-hide");
  });

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

}

Answer 3

你可以使用switch()试试这个片段：

 function hide(n){ switch(n){ case 1: $(".nf-short-desc").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide"); $(".nf-btn-opt").addClass("nf-hide"); $(".nf-para").addClass("nf-hide"); break case 2: $(".nf-para").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide"); $(".nf-btn-opt").addClass("nf-hide"); $(".nf-short-desc").addClass("nf-hide"); break case 3: $(".nf-para").addClass("nf-hide"); $(".nf-main-c").removeClass("nf-hide"); $(".nf-btn-opt").removeClass("nf-hide"); $(".nf-short-desc").addClass("nf-hide"); break } }

 .nf-hide{opacity:0;} div{border:1px solid black; width:100px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="hide(1)">case 1</button> <button onclick="hide(2)">case 2</button> <button onclick="hide(3)">case 3</button> <p> <div class="nf-short-desc nf-hide">short</div> <div class="nf-main-c nf-hide">main</div> <div class="nf-btn-opt nf-hide">btn</div> <div class="nf-para nf-hide">para</div>

Answer 4

我看到每个块的类名仍然相同。 我建议，改为使用“_nf-short-ans”、“_nf-multi-choice”等为每个锚点使用一个名称类，例如：

<a href="#" class="_nf-short-ans _nf-click">text</a>
<a href="#" class="_nf-multi-choice _nf-click">text</a>

然后你可以在你的js中使用_nf-click来检测事件

$("._nf-click").on("click", function() {
       $(this).find(".nf-para").addClass("nf-hide");
       $(this).find(".nf-main-c").removeClass("nf-hide");
       $(this).find(".nf-btn-opt").removeClass("nf-hide");
       $(this).find(".nf-short-desc").addClass("nf-hide");
  });

这只是一个想法，因为如果没有你的 HTML 代码，这个代码是否可以工作并不容易理解