Dopracowanie przycisku hide show

Odpowiedz Nowy wątek
2018-04-24 11:51
0

Witam,
Jestem początkujący
piszę sobie małą aplikację do dodawania, wyświetlania i usuwania filmów. Obecnie to wygląda tak jak wysłałem na załączniku. Kiedy wcisnę przycisk hide lub show list to znika lub pojawia się sama treść tabeli Movie List (tak jak na zdjęciach) i moje pytanie brzmi jest jakiś sposób żeby znikała całość? tzn razem z przyciskami Delete , Details tytułami pól itp.
Druga sprawa to przyciski detatails. Chciałbym żeby docelowo wyświetlała się sama lista tytułów a dopiero po kliknięciu Details - reszta szczegółów filmu
I ostatnia rzecz - obecnie mam dwa przyciski osobno hide i show, a jak mogę zrobić tylko jeden przycisk który pokaże listę kiedy jej nie ma i schowa kiedy jest ?

mój plik html wygląda obecnie tak:

<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CRUD</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i&subset=latin-ext" rel="stylesheet">
</head>
<body>

<!--<h1 class="movies-heading movies-heading--main">Movies App</h1>-->

<main class="crud container">
  <section class="datatable">
    <h2>Add a new movie</h2>
    <form
        class="datatable__row datatable__row--add"
        method="POST"
        action="http://localhost:8080/v1/movie/createMovie"
        data-movie-add-form
    >
      <fieldset class="datatable__row-section datatable__row-section--input-section">
        <label class="datatable__input-label">
          Movie's title
        </label>
        <input type="text" name="title" placeholder="Insert movie's title" required minlength="1">
      </fieldset>

      <fieldset class="datatable__row-section datatable__row-section--input-section">
        <label class="datatable__input-label">
          Movie's author
        </label>
        <textarea name="author" placeholder="Insert movie's author" required minlength="1"></textarea>
      </fieldset>

        <fieldset class="datatable__row-section datatable__row-section--input-section">
        <label class="datatable__input-label">
          Movie's genre
        </label>
        <textarea name="genre" placeholder="Insert movie's genre" required minlength="1"></textarea>
      </fieldset>

        <fieldset class="datatable__row-section datatable__row-section--input-section">
        <label class="datatable__input-label">
          Movie's production year
        </label>
        <textarea name="production" placeholder="Insert movie's production year" required minlength="1"></textarea>
      </fieldset>

      <fieldset class="datatable__row-section datatable__row-section--button-section">
        <button type="submit" data-movie-add-button class="datatable__button">Add a movie</button>
        <button id="hide"
        class="datatable__button">Hide List</button>
        <button id="show"
        class="datatable__button">Show List</button>
      </fieldset>
    </form>
  </section>

    <p>

  <section class="datatable">
    <h2>Movies list</h2>  
    <div class="datatable__movies-container" data-movies-container></div>
  </section>
</main>

<div class="template" data-datatable-row-template>
  <form class="datatable__row" data-movie-id="0">
    <fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-title-section>
      <label class="datatable__input-label">
        Movie's title
      </label>
      <input type="text" name="title" placeholder="Insert a new movie name" data-movie-name-input required minlength="1">
      <p class="datatable__field-value" data-movie-title-paragraph></p>
    </fieldset>

    <fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-author-section>
      <label class="datatable__input-label">
        Movie's author
      </label>
      <textarea name="title" placeholder="Insert new movie author" data-movie-author-input required minlength="1"></textarea>
      <p class="datatable__field-value" data-movie-author-paragraph></p>
    </fieldset>

    <fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-genre-section>
      <label class="datatable__input-label">
        Movie's genre
      </label>
      <textarea name="title" placeholder="Insert new movie genre" data-movie-genre-input required minlength="1"></textarea>
      <p class="datatable__field-value" data-movie-genre-paragraph></p>
    </fieldset>

    <fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-production-section>
      <label class="datatable__input-label">
        Movie's production year
      </label>
      <textarea name="title" placeholder="Insert new movie production year" data-movie-production-input required minlength="1"></textarea>
      <p class="datatable__field-value" data-movie-production-paragraph></p>
    </fieldset>

    <fieldset class="datatable__row-section datatable__row-section--button-section">

      <button id="hide"
        class="datatable__button">Hide Details</button>
        <button id="show"
        class="datatable__button">Show Details</button>
      <button type="button" data-movie-delete-button class="datatable__button">Delete</button>
    </fieldset>
  </form>
</div>
    </p>

<script src="jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Z góry dziękuje za pomoc

Nie wolałbyś oszczędzić sobie bólu i zrobić tego w czymś przeznaczonym do takich zabaw (np. Vue czy Angular)? ;-) - Patryk27 2018-04-24 12:23
w zasadzie zadanie bardziej polega na tej backend'owej stronie żeby to wszystko działało i tak naprawde zostały mi tylko te przyciski do zrobienia więc chyba już skończę w ten sposób :) ale dobra podpowiedź na następny raz :) - labamba 2018-04-24 12:33

Pozostało 580 znaków

2018-04-24 14:29
1

moje pytanie brzmi jest jakiś sposób żeby znikała całość? tzn razem z przyciskami Delete , Details tytułami pól itp.

W jQuery nie wiem, poza jQuery – tak, trzeba na zdarzeniu onclick przycisku ustawić akcję kontenerObuDanychElementow.style.display = none; (ewentualnie można nawet zedytować bezpośrednio plik CSS, jeśli to nie burzy Twojej estetyki projektanta).

Druga sprawa to przyciski detatails. Chciałbym żeby docelowo wyświetlała się sama lista tytułów a dopiero po kliknięciu Details - reszta szczegółów filmu

Zobacz elementy HTML5 <details> i <summary>.

I ostatnia rzecz - obecnie mam dwa przyciski osobno hide i show, a jak mogę zrobić tylko jeden przycisk który pokaże listę kiedy jej nie ma i schowa kiedy jest ?

Jeśli chcesz pozostawić ten kod jQuery (w który nie będę ingerować), możesz za każdym kliknięciem zmieniać danemu przyciskowi klasę, i dodać CSS, który dla danej z dwóch klas albo go schowa (display: none), albo pokaże (display: auto lub inna wartość, zależnie od projektu CSS).


edytowany 3x, ostatnio: Silv, 2018-04-24 14:30

Pozostało 580 znaków

2018-04-24 21:32
0
Silv napisał(a):

Zobacz elementy HTML5 <details> i <summary>.

Witam ponownie :)
Dziękuje za odpowiedź, pomogła. Udało się schować szcczegóły jednak jak sie pozbyć słówka "Szczegóły"? dodałem tylko "<details close="close"> </details> w odpowiednim miejscu i chciałbym mieć samą strzałkę, a mam strzałkę z napisem szczegóły. Troche to denerwujące :)
Pozdrawiam

edytowany 1x, ostatnio: labamba, 2018-04-24 21:34

Pozostało 580 znaków

2018-04-24 21:53
1

jak sie pozbyć słówka "Szczegóły"?

Ze specyfikacji:

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

To znaczy, że powinieneś umieścić element <summary> jako pierwszy element w elemencie pierwsze dziecko elementu <details>, i najprawdopodobniej wtedy zamiast słowa Szczegóły pojawi się treść elementu <summary> (biorąc na logikę).


UDPATE: Sprawdziłem, na JSFiddle działa.


edytowany 2x, ostatnio: Silv, 2018-04-24 22:01

Pozostało 580 znaków

2018-04-24 23:03
0

Faktycznie, nie doczytałem. U mnie również działa :)

edytowany 1x, ostatnio: labamba, 2018-04-24 23:04

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0