JQuery条件语句不起作用答案

【问题标题】：JQuery Conditional statement not workingJQuery条件语句不起作用
【发布时间】：2011-12-04 23:25:36
【问题描述】：

这是我的代码：

// JavaScript Document
$(document).ready(function() {
row[1] = false;
row[2] = false;
row[3] = false;
row[4] = false;
row[5] = false;
row[6] = false;
$('.row1bback').fadeOut(0);
$('.row2bback').fadeOut(0);
$('.row3bback').fadeOut(0);
$('.row4bback').fadeOut(0);
$('.row5bback').fadeOut(0);
$('.row6bback').fadeOut(0);
function rowrfade() {
    var rRow = Math.ceil(Math.random() * 6);
    var rDelay = (Math.ceil(Math.random() * 20)) * 1000;
    rowfade(rRow, rDelay);
}
function rowfade(rRow, rDelay) {
  if (row[rRow] == false || row[rRow] == "") {
      $('.row'+ rRow + 'aback').delay(rDelay).fadeOut(10000);
      $('.row'+ rRow + 'bback').delay(rDelay).fadeIn(10000);
      return row[rRow] = true;
      rowrfade();
  } else if (row[rRow] == true) {
      $('.row'+ rRow + 'aback').delay(rDelay).fadeIn(10000);
      $('.row'+ rRow + 'bback').delay(rDelay).fadeOut(10000);
      return row[rRow] = false;
      rowrfade();
  }
}
    //row1fade();
    rowrfade();
});

我正在尝试随机隐藏/显示 6 行的 2 张图片中的 1 张。我正在尝试了解使此功能发挥作用的最佳方法。

我想检查为调用的随机行显示的图片。如果是图片a（value = false）或图片b（value = true）。如果显示图片a，则淡出图片a并显示该行的图片b。这个循环会不断重复和循环。

这是我的 HTML 代码：

<div class="mframe">
  <div class="row1aback">
  </div>
  <div class="row1bback">
  </div>
  <div class="row2aback">
  </div>
  <div class="row2bback">
  </div>
  <div class="row3aback">
  </div>
  <div class="row3bback">
  </div>
  <div class="row4aback">
  </div>
  <div class="row4bback">
  </div>
  <div class="row5aback">
  </div>
  <div class="row5bback">
  </div>
  <div class="row6aback">
  </div>
  <div class="row6bback">
  </div>
</div>

我的图片正在使用背景图片 css 属性。我也只有 6 行，每行 2 张图像。默认情况下，我使用 JS 显示第一张图像并隐藏第二张图像。然后我随机选择一行，随机延迟 1 到 20 秒。然后我用它来改变随机选择的行中的图片。我使用延迟使效果看起来是随机发生的。

我已经更改了我的代码，并正在使用以下条件语句来让这个函数工作。如果您知道另一种使它起作用的方法，请告诉我。

谢谢。

// JavaScript Document
$(document).ready(function() {
$('.row1bback').fadeOut(0);
$('.row2bback').fadeOut(0);
$('.row3bback').fadeOut(0);
$('.row4bback').fadeOut(0);
$('.row5bback').fadeOut(0);
$('.row6bback').fadeOut(0);
function rowrfade() {
    var rRow = Math.ceil(Math.random() * 6);
    var rDelay = (Math.ceil(Math.random() * 10)) * 1000;
    var fTimer = 6500;
    rstatus = $('.row' + rRow + 'aback').css('display');
    if (rstatus == 'block') {
        $('.row'+ rRow + 'aback').delay(rDelay).fadeOut(fTimer);
        $('.row'+ rRow + 'bback').delay(rDelay).fadeIn(fTimer, 
        function() {
            rowrfade()
        });
    } else if (rstatus == 'none') {
        $('.row'+ rRow + 'aback').delay(rDelay).fadeIn(fTimer);
        $('.row'+ rRow + 'bback').delay(rDelay).fadeOut(fTimer, 
        function() {
            rowrfade()
        });
    }
}
rowrfade();
});

【问题讨论】：

标签： jquery loops conditional if-statement

【解决方案1】：

您需要使用fadeIn 和fadeOut 回调来使其正常工作，这样一个项目不会在下一个项目开始淡出之前开始淡入。

以这种方式存储数组的可扩展性不是很高。在我的示例中，我将所有行存储在一个 jquery 对象中，并只跟踪当前行。

由于您只有两张图片，因此我隐藏了其中一个孩子，然后根据是否可见来确定淡入或淡出哪个孩子。如果您要使用两个以上的项目，则必须对此进行调整。

我希望这会有所帮助。

<html>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var current = 0;
    var $rows = $('.row');

    $rows.each(function() {
        $(this).children(':last').hide();
    });

    function fade() {
        var newRow = null;
        do {
            newRow = Math.floor(Math.random() * $rows.length);
        } while(newRow === current);    

        var $row = $rows.eq(current);
        var $hide = $row.children(':visible');
        var $show = $row.children(':not(:visible)');

        $hide.fadeOut('slow');
        $show.fadeIn('slow', function() {
            current = newRow;
            fade();
        });
    }

    fade();
});

</script>
<div class="row">1: <span>A</span><span>B</span></div>
<div class="row">2: <span>A</span><span>B</span></div>
<div class="row">3: <span>A</span><span>B</span></div>
<div class="row">4: <span>A</span><span>B</span></div>
<div class="row">5: <span>A</span><span>B</span></div>
<div class="row">6: <span>A</span><span>B</span></div>
</html>

【讨论】：

我故意在一个图像淡入的同时淡出一个图像。这是为了创建一张同时溶解到另一张图片中的图片。
那么您只需将fadeIn 移到回调下方即可。尽管您可能希望将递归调用保留在回调中，以便在淡入完成之前它不会开始另一行。您还需要弄清楚如何正确定位，以便它们彼此叠放。
我在下面更新了我的文字。对于每一行，我试图在两个图像之间淡入淡出。您的代码将一次淡出所有 6 张图像。我需要检查每行显示哪个图像的状态，然后基于此执行淡入淡出。