Question

除了基本动画之外，我从未特别使用过JS，

我正在处理的页面要求我淡出活跃的div并淡化所请求的那个，我有大约25个不同的div我将会消失。在那一刻我无法想到如何只消除活跃的那个，所以我试图淡化每个div，但是那个请求的那个。

这是我试图开始工作的代码

    var active = 0;

for (i=0;i<array.length;i++) {
if (i != active){

document.write("$('."+array[i]+"').fadeOut(900);");
}

当然我知道document.write不应该存在，但理想情况下，代码必须打印到我正在使用的.js文件中。我不知道如何将它打印到.js。

任何建议都会非常感激，或者在没有页面重新加载的情况下在php中执行此操作！

Answer 1

不确定为什么使用document.write而不是简单地执行javascript。

var active = 0;

for (i=0;i<array.length;i++) {
if (i != active) {
    $("."+array[i]).fadeOut(900);
}

此外，尝试使用jQuery选择器通过向每个div添加一个额外的类来选择所有非活动div：

var active = array[0];
var classname = "some_class";

$("div." + classname + ":not(." + active + ")").fadeOut(900);

您甚至可以选择不是活动的div并将其淡出来：

var active = array[0];
var classname = "some_class";

$("div." + classname + ":not(." + active + "):visible").fadeOut(900);

Answer 2

当您发现自己动态生成代码时，通常表示您想退后一步并重新评估您的方法。： - ）

在这种情况下，无需动态创建JavaScript。这只是运行代码的问题。

我不确定你对“主动”的定义是什么，所以这里的东西会根据你按下的按钮来淡入/淡出div：

HTML：

<input type='button' value='1'>
<input type='button' value='2'>
<input type='button' value='3'>
<input type='button' value='4'>
<input type='button' value='5'>
<input type='button' value='6'>
<div id='container'>
  <div class='c1'>This is c1</div>
  <div class='c2'>This is c2</div>
  <div class='c3'>This is c3</div>
  <div class='c4'>This is c4</div>
  <div class='c5'>This is c5</div>
  <div class='c6'>This is c6</div>
</div>

JavaScript（教学版）：

jQuery(function($) {

  // Hook our buttons; this selector hooks all of them,
  // so you probably want to narrow that down, but I
  // have no idea what your definition of "active" is,
  // so I made one up.
  $(":button").click(function() {

    // Get the value of the button, e.g., 1, 2
    var val = this.value; 

    // Get all of the divs in the container
    var divs = $("#container div");

    // Fade out all of the ones that aren't our target;
    // fade in the one that is
    divs.not(".c" + val).fadeOut(900);
    divs.filter(".c" + val).fadeIn(900);
  });

});

Live copy

这样做：

使用jQuery ready函数（我将函数传递给jQuery函数的快捷方式）在页面“准备就绪”时运行代码（已构建DOM）< / LI>
查找我们想要处理的所有div。在我的情况下，它是容器中的所有div，但您可以使用您想要的any CSS3 selector（and then some）。
使用not和类选择器过滤掉具有目标类的div，然后使用fadeOut开始淡化其他类。
使用filter将设置简化为我们的目标div，并fadeIn开始将其淡入。

该版本是为了清晰起见。这是一个更简洁的版本（对于那些了解jQuery的人来说仍然非常清楚，但对于仍然找不到脚的人来说却很棘手）：

JavaScript（使用end的链式版本）：

jQuery(function($) {

  // Hook our buttons; this selector hooks all of them,
  // so you probably want to narrow that down, but I
  // have no idea what your definition of "active" is,
  // so I made one up.
  $(":button").click(function() {

    // Get the value of the button, e.g., 1, 2
    var val = this.value; 

    // Get all of the divs in the container
    // Fade out all of the ones that aren't our target;
    // fade in the one that is
    $("#container div")
      .not(".c" + val).fadeOut(900)
      .end()
      .filter(".c" + val).fadeIn(900);
  });

});

Live copy

使用函数写入.js文件

2 个答案: