jQuery和JS变量fadeOut（）

问题描述：

我一直在玩这个代码几个小时，现在无法弄清楚，我已经尝试了许多不同的方式来做到这一点。jQuery和JS变量fadeOut（）

基本上，我有几个部分，有问题和单选按钮，当下一个按钮被点击转到下一个问题时，它运行我的功能，检查收音机框是否被选中，如果我不' t使用一个变量，例如，

if($('input[name=question2]:checked').length > 0){ 
    //Do something 
}

然后淡出一个和下一个问题fadesin。

我的问题是，当我尝试使用一个变量而不是每个问题重复我的代码5次，所以当按下按钮时，它使用变量i和j作为问题编号。

HTML

<section id="question2"> 
     <input type="radio" id="saveMoney" name="question2" value="saveMoney"/> 
     <label for="saveMoney">To Help Save Money</label> 
     <br /> 
     <input type="radio" id="seeMoney" name="question2" value="seeMoney"/> 
     <label for="seeMoney">Visualise My Finances</label> 
    <button class="btn btn-primary btn-margin center-block" onclick="next()">Next</button> 
</section>

JS和jQuery

function next(){ 
    var i = 2; 
    var j = 3; 

    if($('input[name=question "'+ i +'" ]:checked').length > 0) { 
    $('#question"'+ i + '"').fadeOut(); 
    $('#question"'+ j + '"').delay(600).fadeIn(); 
    i++; 
    j++; 
} 
}

答

因为你串联字符串和i和j变量在使用额外的引号"可能发生。

根据您的代码，第一个级联结果将是'input[name=question "2" ]:checked'这不是您要查找的结果。

取而代之的是，尝试'input[name=question'+i+']:checked'没有额外的报价，所以其输出将是一样的，当你不使用变量'input[name=question2]:checked'

，同样的事情在其他字符串+变串联，有额外的双引号"搞乱了一切。

更正代码：

function next(){ 
    var i = 2; 
    var j = 3; 

    if($('input[name=question'+ i +']:checked').length > 0) { 
     $('#question'+ i).fadeOut(); 
     $('#question'+ j).delay(600).fadeIn(); 
     i++; 
     j++; 
    } 
}

答

你有没有和jQuery的字符串里面，无需使用length属性，看是否复选框被选中一些语法错误，最重要的事情：

你需要使用闭包：

function next(){ 
    var i = 2; 
    var j = 3; 
    // this is a closure 
    (function(i,j){ 
    // you had a typo here 
    if($('input[name=question'+ i +']:checked')) { 
    $('#question'+ i).fadeOut(); 
    $('#question'+ j).delay(600).fadeIn(); 

} 
})(i,j); 
    i++; 
    j++; 
} 

$("input").click(function(){next()})

你需要记住的是，我和歼变量每次调用时初始化该函数只能工作一次，更好的办法是在函数范围外定义I和J，更好的想法是将它们作为参数传递给函数。

答

有由r1verside要添加额外的引号解释涉及到你的函数的一些问题，在第一次。此外，每次调用函数内部的计数器总是被重置为 i = 2; j = 3;

为避免这种情况，请将此变量添加到函数中。

var i = 2; 
var j = 3; 

function next() { 
    if($('input[name=question'+i+']:checked').length > 0) { 
    $('#question'+i).fadeOut(); 
    $('#question'+j).delay(600).fadeIn(); 
    i++; 
    j++; 
    } 
}

上的jsfiddle一个例子：https://jsfiddle.net/xrh2moa2/1/

答

谢谢你们的帮助，让我解决了这个问题与上面的帮助。

这是我是如何做到的。

首先，我设置了函数外的变量，因为每次按下按钮时，它们被重置，这不是我想要的，其次，在上面的帮助下，我删除了额外的“”，现在它的工作正常。另外，请注意.length > 0

没有这个，它就无法工作。

再次感谢！

var i = 2; 
var j = 3; 

function test(){ 

    if($('input[name=question'+ i +']:checked').length > 0) { 
     $('#question'+ i).fadeOut(); 
     $('#question'+ j).delay(600).fadeIn(); 
     i++; 
     j++; 
    } else { 
    document.getElementById('warning'+ i +'').innerHTML = "Please Select an Answer"; 
    } 
}

jQuery和JS变量fadeOut（）

相关推荐