Question

我看到我的大部分代码都隐藏了容器，并且当我在导航栏上选择适当的项目时显示了特定的容器。我遇到的麻烦是想出一个if语句，或者会减少我的代码的东西

  // add click event for .dropdown-content
  // if #me clicked hide: $(".container").hide();, main page we'll implement later, and show: $("#aboutMe").show();
  $("#me").click(function() {
    $(".container").hide();
    show: $("#aboutMe").show();
  });
  // else if #port clicked hide: $(".container").hide();, main page we'll implement later, and show: $("#portfolio").show();
  $("#port").click(function() {
    $(".container").hide();
    show: $("#portfolio").show();
  });
  // else if #contact clicked hide: $(".container").hide();, main page we'll implement later, and show: $("#contact").show();
  $("#contact").click(function() {
    $(".container").hide();
    show: $("#cont").show();
  });

我的html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script
            src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="assets/js/app.js"></script>
        <link rel="stylesheet" type="text/css" media="screen"
            href="assets/css/reset.css">
        <link rel="stylesheet" type="text/css" media="screen"
            href="assets/css/style.css">
        <title>Juanito's Portfolio</title>
    </head>
    <body>
        <nav class="dropdown">
            <p id="pimp"> Juan Alberto Pimentel JR </p>
            <div class="dropdown-content">
                <p class="dropAns" id="me">About Me</p>
                <p class="dropAns" id="port">Portfolio</p>
                <p class="dropAns" id="contact">Contact</p>
            </div>
        </nav>
        <br>
        <div class="container" id="aboutMe">
            <div class="col-3 marg">
                <img src="assets/images/juanito.jpg" alt="sexy Me" id="float">
            </div>
            <div class="col-6 marg"><p>Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        </div>
        <br>
        <div class="container" id="portfolio">

        </div>
        <br>
        <div class="container" id="cont">
            yo
        </div>
    </body>
</html>

Answer 1

您可以将data属性添加到每个项目，然后javascript代码在显示元素时可以使用它。

<button class="toggle-button" data-show-id="aboutMe">Click me</button>

$(".toggle-button").click(function() {
  var idToShow = $(this).data('show-id');
  $(".container").hide();
  $('#' + idToShow).show();
});

Answer 2

$("dropAns").click(function() {
$(".container").hide();
var idToShow = $(this).data('show-id');
show: $(idToShow).show();
});

            <p class="dropAns" data-show-id="aboutMe" id="me">About Me</p>

减少点击事件代码的最佳方法是什么？

2 个答案: