jQuery функция появления и исчезновения с параметрами - PullRequest
Новая
       16

jQuery функция появления и исчезновения с параметрами

0 голосов
/ 17 апреля 2019

Я пытаюсь сделать эту функцию jQuery разрешающей параметры или какой-то способ заставить ее работать с каждым элементом в моем списке.

У меня есть функция, которая делает то, что я хочу, для первого элемента в списке, но не работает для остальных. Я хочу знать, есть ли способ передать параметры в функцию jQuery, чтобы я мог заставить функцию работать с несколькими элементами. 

$(document).ready(function() {
  $("#f2").click(function() {
    $("#f2").fadeOut()
    $("#f1").delay(375).fadeIn()
  });
  $("#f1").click(function() {
    $("#f1").fadeOut();
    $("#f2").delay(375).fadeIn();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Kentucky Dam Flood Gates Open</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div id="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc" id="f1">
        Lorem Ipsum...
      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div id="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc" id="f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div id="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc" id="f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>


</ul>

Я ожидал, что это сработает со всем, для чего нужны классы, и изменит только те, на которые вы нажали, но эта функция работает только для первого объекта в списке.

Ответы [ 3 ]

1 голос
/ 17 апреля 2019

Вот ваш обновленный код переключения на классы.

Вам не нужно пропускать селектор, если вы всегда нацеливаетесь на одни и те же селекторы.

Вам также необходимо добавить в функцию некоторую логику prev и next, в противном случае любой элемент f2 или f1, по которому щелкают, вызовет их всех на странице. 

$(document).ready(function() {
  $(".f2").click(function() {
    $(this).fadeOut();
    $(this).next('.f1').delay(375).fadeIn();
  });
  $(".f1").click(function() {
    $(this).fadeOut();
    $(this).prev('.f2').delay(375).fadeIn();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Kentucky Dam Flood Gates Open</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...
      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>


</ul>

А вот скрипка для игры с: https://jsfiddle.net/brzeLywg/

Информация о предыдущем и следующем:

https://api.jquery.com/next/

https://api.jquery.com/prev/

0 голосов
/ 17 апреля 2019

Попробуйте, это работает нормально, JSFiddle Demo 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Kentucky Dam Flood Gates Open</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...
      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>


</ul>

JQuery: 

$(document).ready(function() {
    $(".f2").on('click', function() {
    $(".f2").fadeOut();
    $(".f1").delay(375).fadeIn();
  });
  $(".f1").on('click', function() {
    $(".f1").fadeOut();
    $(".f2").delay(375).fadeIn();
  })
})
0 голосов
/ 17 апреля 2019

Создайте функцию и оберните ваш код, чтобы передать селектор и задержку как параметры. 

function setAnimation(firstSelector, secondSelector, delayNum) {
  $(secondSelector).click(function() {
    $(secondSelector).fadeOut()
    $(firstSelector).delay(delayNum).fadeIn()
  });
  $(firstSelector).click(function() {
    $(firstSelector).fadeOut();
    $(secondSelector).delay(delayNum).fadeIn();
  });
}

в вашем скрипте просто вызовите столько функций следующим образом: 

$(document).ready(function() {
  setAnimation("#f1", "#f2", 375);
});
...