Question

我不确定此问题是否曾经被问过 - 我找不到它，但如果我错过了，我很抱歉。

我正在尝试创建一个带有复选框的页面，该页面将淡入/淡出相应的图像。衰落将需要1秒，每100毫秒，图像的不透明度增加或减少0.1;当不透明度达到0或1时，停止setInterval调用。但是，我不确定如何将参数传递给匿名函数调用。我正在尝试传递两个变量 - 第一个是从复选框值获取的图像ID，另一个是是否选中了复选框，以便函数知道是淡入还是淡出。

但是，我遇到了代码的问题（见下文），我认为它是由于setInterval函数调用中变量的范围 - 这就是为什么我要求将多个参数传递给调用

例如：

<form action="">
<input type="checkbox" onclick='handleClick(this);' name="skymap" value="aurora">Aurora
<input type="checkbox" onclick='handleClick(this);' name="skymap" value="mainindex">Main Index
</form>

功能如下（到目前为止）

function handleClick(cb) 
{

var myInterval = setInterval(function () 
{
  if (cb.checked) // tick box checked - fade in.
  {
    document.getElementById( cb.value ).style.opacity+=0.1;  // I'll refactor all these style.opacity calls later on :)

    if( document.getElementById( cb.value ).style.opacity>1 ) // full opacity - stop the timer
    {
        document.getElementById( cb.value ).style.opacity = 1;
        clearInterval(myInterval);
    }
}
else // fade out
{
    document.getElementById( cb.val ).style.opacity-=0.1;

    if( document.getElementById( cb.val ).style.opacity<0 )
    {
        document.getElementById( cb.val ).style.opacity = 0;
        clearInterval(myInterval);
    }
}


}, 100);


}

图像被称为：

<img id="aurora" src="aurora.png" />

Answer 1

你遇到了一个棘手的问题。

首先，你写了＆＃34; cb.val＆＃34;而不是＆＃34; cb.value＆＃34;在其他部分

其次，对象的不透明度属性＆＃34; cb＆＃34;是字符串类型。 - =操作将不透明度值转换为数字，因为您无法对字符串执行减号操作。而是+ =操作，将数字（0.1）转换为字符串并添加到不透明度字符串的末尾（例如，如果不透明度为0.1，则结果为＆＃34; 0.10.1＆＃34;）。由于此值无效，它将被设置为最后一个有效值，并且您将陷入循环

这是一个有效的例子：

function handleClick(cb) 
{

var myInterval = setInterval(function () 
{
  if (cb.checked) // tick box checked - fade in.
  {
    document.getElementById( cb.value ).style.opacity = parseFloat(document.getElementById( cb.value ).style.opacity) + 0.1  // I'll refactor all these style.opacity calls later on :)

    if( document.getElementById( cb.value ).style.opacity>1 ) // full opacity - stop the timer
    {
        document.getElementById( cb.value ).style.opacity = 1;
        clearInterval(myInterval);
    }
}
else // fade out
{
    document.getElementById( cb.value ).style.opacity-=0.1;

    if( document.getElementById( cb.value ).style.opacity<0 )
    {
        document.getElementById( cb.value ).style.opacity = 0;
        clearInterval(myInterval);
    }
}


}, 100);


}

您可能遇到的另一个问题是默认情况下未设置opacity属性（或者至少您无法确定）。所以第一次，opacity =＆＃34;＆＃34;，空字符串。这将导致动画中的跳跃。如果检测到空字符串，请务必初始化不透明度。

Answer 2

您可以使用setInterval(function(arg1, arg2, ..){...}, intervalTime, arg1, arg2,...)功能

的可选参数

function handleClick(cb) 
{

    var myInterval = setInterval(function (checked, imgId) 
        {
          if (checked) // tick box checked - fade in.
          {
            document.getElementById( imgId ).style.opacity+=0.1;  // I'll refactor all these style.opacity calls later on :)

            if( document.getElementById( imgId ).style.opacity>1 ) // full opacity - stop the timer
            {
                document.getElementById( imgId ).style.opacity = 1;
                clearInterval(myInterval);
            }
        }
        else // fade out
        {
            document.getElementById( imgId ).style.opacity-=0.1;

            if( document.getElementById( imgId ).style.opacity<0 )
            {
                document.getElementById( imgId ).style.opacity = 0;
                clearInterval(myInterval);
            }
        }
        }, 100, cb.checked, cb.value);

}

Answer 3

您可以在现有代码中使用cb.checked，但要回答您的问题：使用setInterval和setTimeout，您只需使用闭包功能传入变量，因为来自外部作用域（函数）的值在您可以获得评估时间。在非常简单的层面上，您可以执行以下操作：

function myTimeoutClosure(greeting, subject) {
    return function() {
        console.log(greeting + " " + subject);
    };
}
// ...
setTimeout(myTimeoutClosure("Hello", "World"), 500);

Answer 4

这是一个有效的例子，你前进的方式可能会让人们反复点击复选框，并将一堆间隔堆叠在一起，这可能会产生一些问题。在这种情况下，您有一个函数可以通过超时调用自身并逐步完成转换，而不是完全依赖于间隔。

＆＃13;

function fadeElement(elem, increment) {

  elem.style.opacity = parseFloat(elem.style.opacity) + increment;

  if (elem.style.opacity >= 1) {
    elem.style.opacity = 1
  } else if (elem.style.opacity <= 0) {
    elem.style.opacity = 0
  } else {
    clearTimeout(elem.getAttribute('data-timeout'))
    elem.setAttribute('data-timeout', setTimeout(function() {
      fadeElement(elem, increment)
    }, 100))
  }
}

function handleClick(cb) {

  var chkbox = document.getElementById(cb.value);
  var direction = cb.checked ? 0.1 : -0.1;

  fadeElement(chkbox, direction)


}

＆＃13;

<form action="">
  <input type="checkbox" checked onclick='handleClick(this);' name="skymap" value="aurora">Aurora
  <input type="checkbox" checked onclick='handleClick(this);' name="skymap" value="mainindex">Main Index
</form>
<p id="aurora" style="opacity:1">Aurora</p>
<p id="mainindex" style="opacity:1">Main Index</p>

＆＃13;

Answer 5

这是一个例子。我希望这是你正在寻找的。请告诉我。

<form action="">
<input type="checkbox" class='imageSelect' name="skymap" value="aurora">Aurora
<input type="checkbox"  class= 'imageSelect' name="skymap" value="mainindex">Main Index
</form>
<div id="aurora" style="background:yellow; width:150px; height:40px; float:left; display:none;">Aurora Image </div>
<div id="mainindex" style="background:blue; width:150px; height:40px;float:left; display:none;">MainIndex Image </div>

JS：

function CheckBoxClick(){
    $(".imageSelect").click(function(){
        /*if(this.checked){
             $("#"+$(this).val()+" ").fadeIn();
          }else{
             $("#"+$(this).val()+" ").fadeOut();
          }*/
     $("#"+$(this).val()+" ").toggle(this.checked)
    });
};

淡入淡出效果看起来更好但是如果你使用或不使用它就是你的电话，两者都有效。这里使用的代码为：https://jsfiddle.net/dzgppqap/

PD：请记住在页面准备就绪时添加事件：

$(document).ready(CheckBoxClick());

在setInterval

5 个答案: