Szukam eleganckim sposobu, aby uniknąć pisania tak wielu kodu do wykonania OnClick, pokaż kliknięte, ukryj innych.

Oto kod, używam:

Html:

<p align="center" style="font-size: 22px;">
  <span class="badge badge-secondary" id="yesterday"><a href="#" style="color: inherit;">Yesterday</a></span>
  <span class="badge badge-dark" id="today"><a href="#" style="color: inherit;">Today</a></span>
  <span class="badge badge-secondary" id="tomorrow"><a href="#" style="color: inherit;">Tomorrow</a></span>
</p>

JQuery:

  $('#yesterday').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
    $('.yesterday').slideDown('slow');
    $('.today,.tomorrow').slideUp('1000');
  });
  $('#today').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
    $('.today').slideDown('slow');
    $('.yesterday,.tomorrow').slideUp('1000');
  });
  $('#tomorrow').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
    $('.tomorrow').slideDown('slow');
    $('.yesterday,.today').slideUp('1000');
  });
2
hackerman 5 czerwiec 2018, 14:01

4 odpowiedzi

Najlepsza odpowiedź

Aby to zrobić:

  1. Użyj klasy na tych trzech elementach (powiedzmy, show-hide)
  2. Użyj klas na .yesterday, .today i elementy .tomorrow również (powiedzmy, slide-target).
  3. Użyj pojedynczego click Handler na klasie
  4. W ramach obsługi, this jest elementem, który chcesz pokazać, a jego rodzeństwo (patrz {{x1 }}) to te, które chcesz ukryć
  5. W ramach obsługi, $('.slide-target') to wszystkie cele, a następnie możesz użyć .filter('.' + this.id), aby tylko docelować tylko do tego elementu, a .not('.' + this.id), aby skierować do innych

Tak mniej więcej mówiąc:

<p align="center" style="font-size: 22px;">
  <span class="show-hide badge badge-secondary"><a href="#" style="color: inherit;">Yesterday</a></span>
  <span class="show-hide badge badge-dark"><a href="#" style="color: inherit;">Today</a></span>
  <span class="show-hide badge badge-secondary"><a href="#" style="color: inherit;">Tomorrow</a></span>
</p>

I

$('.show-hide').click(function(e) {
  e.preventDefault();
  // Just to avoid doing it repeatedly
  var $this = $(this);
  // Add this class
  $this.addClass('badge-dark').removeClass('badge-secondary');
  // Remove it from siblings
  $this.siblings().addClass('badge-secondary').removeClass('badge-dark');
  // Find the target elements
  $('.slide-target')
    .filter('.' + this.id).slideDown('1000').end() // Slide down related
    .not('.' + this.id).slideUp('1000')            // Slide up others
  // Slide down the relevant element(s)
});
3
T.J. Crowder 5 czerwiec 2018, 11:11

Nie mogę myśleć o łatwiejszym sposobem na to:

  • Korzystanie z klasy badge jako selektor dla funkcji .click().
  • Używanie $(this) Aby zmienić klasy na elemencie klikniętym, a $('.badge').not($(this)), aby skierować wszystkie inne.
  • Uzyskiwanie nazwy klasy, aby pokazać, zgodnie z klikniętym elementem.
  • Robiąc taki sam jak punkt # 2, aby wyświetlić / ukryć poszukiwane elementy.

Oto fragment pracujący, w którym dodałem trochę stylizacji:

$('.badge').click(function(e) {
  e.preventDefault();
  $('.badge').not($(this)).removeClass('badge-dark').addClass('badge-secondary'); // Resets all except…
  $(this).removeClass('badge-secondary').addClass('badge-dark');                  // … the one clicked
  var classToShow = '.' + $(this).attr('id');                                     // Get this id
  $('.days').not(classToShow).slideUp('1000');                                    // Hide all except…
  $(classToShow).slideDown('slow');                                               // … the one wanted
});
p {
  font-size: 22px;
}

.badge-secondary {
  opacity: 0.5;
}

.badge a {
  color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p align="center">
  <span class="badge badge-secondary" id="yesterday"><a href="#">Yesterday</a></span>
  <span class="badge badge-dark" id="today"><a href="#">Today</a></span>
  <span class="badge badge-secondary" id="tomorrow"><a href="#">Tomorrow</a></span>
</p>

<p class="days yesterday">Yesterday…</p>
<p class="days today">Today…</p>
<p class="days tomorrow">Tomorrow…</p>

Mam nadzieję, że to pomoże!

1
Takit Isy 5 czerwiec 2018, 11:46

Proste ekstrakcja wspólnej logiki do oddzielnej funkcji:

function updateClasses(element, selector) {
    element.addClass('badge-dark').removeClass('badge-secondary');
    $(selector).addClass('badge-secondary').removeClass('badge-dark').slideUp('1000');
}

$('#yesterday').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#today,#tomorrow');
    $('.yesterday').slideDown('slow');
});
$('#today').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#yesterday,#tomorrow');
    $('.today').slideDown('slow');
});
$('#tomorrow').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#yesterday,#today');
    $('.tomorrow').slideDown('slow');
});
1
Dawid Rutkowski 5 czerwiec 2018, 11:08

Coś takiego:

$('#yesterday, #today, #tommorow').click(function(e) {

      e.preventDefault(); 
      $(this).addClass('badge-dark').removeClass('badge-secondary');

      if ( $(this).is("#yesterday") ) {

        $('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
        $('.yesterday').slideDown('slow');
        $('.today,.tomorrow').slideUp('1000');

      } else if ( $(this).is("#today") ) {

        $('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
        $('.today').slideDown('slow');
        $('.yesterday,.tomorrow').slideUp('1000');

      } else if ( $(this).is("#tomorrow") ) {

        $('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
        $('.tomorrow').slideDown('slow');
        $('.yesterday,.today').slideUp('1000');

      }

    });
1
Vurbose 5 czerwiec 2018, 11:10