当前位置： 文江博客 话题详情

JQuery 条件语句不起作用

发布于 2024-12-09 01:37:01 字数 2958 浏览 0 评论 0 原文

这是我的代码：

// 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();
});
原文

Here is my code:

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

I am trying to randomly hide/show 1 of 2 pictures for 6 rows. I am trying to understand what the best way is to make this function work.

I would like to check which picture is shown for the random row called. If it is picture a (value = false) or picture b (value = true). If picture a is shown, then fadeout picture a and show picture b for that row. This cycle will continually repeat and loop.

Here is my HTML code:

<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>

My Images are using the background image css property. I also only have a total of 6 rows with 2 images per row. By default I show the first image and hide the second one using JS. Then I randomly pick a row and a random delay between 1 and 20 seconds. I then use this to change the picture in the random picked row. I use the delay to make the effect appear to happen randomly.

I have since changed my code and am using the following condition statement to get this function to work. Let me know if you know of another way of making it work.

Thanks.

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

独孤求败 2024-12-16 01:37:01

您需要使用 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>

You need to make use of the fadeIn and fadeOut callbacks to make this work properly so that an item does not start to fade in before the next item starts to fade out.

Storing an array in that way is not very scalable. In my example I store all the rows in an jquery object and just keep track of the current row.

Since you only have two picture I have hidden one of the children and then work out which one to fade in or out based on whether it is visible or not. If you were to use more than two items you would have to tweak this.

I hope this helps.

<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>
回复 原文
~没有更多了~

关于作者

時窥

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

missyouangeled

文章 0 评论 0

三生一梦

文章 0 评论 0

压抑⊿情绪

文章 0 评论 0

天涯离梦残月幽梦

文章 0 评论 0

指尖微凉心微凉

文章 0 评论 0

☆獨立☆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文