Каков наилучший способ уменьшить мой код для моих событий по клику? - PullRequest
Новая
       22

Каков наилучший способ уменьшить мой код для моих событий по клику?

0 голосов
/ 12 мая 2019

Я вижу, что большая часть моего кода скрывает контейнеры и показывает конкретный контейнер, когда я выбираю нужный элемент на панели навигации. У меня возникли проблемы с предложением оператора 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>

Ответы [ 2 ]

0 голосов
/ 12 мая 2019 
$("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>
0 голосов
/ 12 мая 2019

Вы можете добавить атрибут данных к каждому элементу, а затем код 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();
});
...