Question

我一直在玩这个代码几个小时但是无法理解，我已经尝试了很多不同的方法来做到这一点。

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

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

然后淡出一个并淡出下一个问题。

我的问题在于，当我尝试使用变量而不是每个问题重复我的代码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++;
 }
}

Answer 1

可能会发生这种情况，因为在连接字符串以及"和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++;
   }
}

Answer 2

有些问题与您的功能有关，第一次如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/

Answer 3

你在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变量，因此它只能工作一次，更好的办法是在函数范围之外定义I和J，更好的想法是将它们作为参数传递给函数。

有关闭包的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Answer 4

谢谢大家的帮助，所以我已经通过上面的帮助解决了这个问题。

我就是这样做的。

首先，我将变量设置在函数外部，因为每次按下按钮时，它们都会被重置，这不是我想要的，其次，在上面的帮助中，我删除了额外的＆＃34;＆＃ 34;现在它的工作正常。另请注意.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（）

4 个答案: