jQuery使用参数淡入淡出功能

Question

我试图使这个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>

我希望这可以处理所有需要它的类，并且只更改你点击的那些，但该功能仅适用于列表中的第一个对象。

Answer 1

这是您更新的代码切换到类。

如果始终以相同的选择器为目标，则无需传递选择器。

你还需要在函数中添加一些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/

Answer 2

创建一个函数并包装你的代码以传递选择器并延迟为params。

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);
});

Answer 3

试试这个工作正常，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();
  })
})