javascript - 带参数的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>

下面是 fiddle : https://jsfiddle.net/brzeLywg/

关于上一个和下一个的信息:

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

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