javascript - javascript条件问题

Question

我正在从 Html 类中获取排名计数，我想根据排名计数显示结果

有 5 个问题有这 4 个选项

有如下的 Html

var $ = jQuery;
var rank = 0;
 var i;
var x = $(".que").toArray();
var length = x.length+1;
for (i = 1; i < length; i++) {

  var rank_count = ($('.que' + i).find(".selected_answer").attr("class").split(/\s+/));
  //var rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));

  if (i == 5 && rank_count[1] == 'rank_1') {
    rank = parseInt(16);
    //console.log(rank);
  } else {
    rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_', ''));
    //
    console.log(rank);
  }

}
// if rank between 0-4 then show this
if (rank >= parseInt(0) && rank <= parseInt(4)) {
  $('.result').find(".blog1").css('display', 'flex');
}
// if rank between 5-8 then show this
if (rank >= parseInt(5) && rank <= parseInt(8)) {
  $('.result').find(".blog2").css('display', 'flex');
}
// if rank between 9-12 then show this
if (rank >= parseInt(9) && rank <= parseInt(12)) {
  $('.result').find(".blog3").css('display', 'flex');
}
// if rank between 13-16 then show this
if (rank >= parseInt(13) && rank <= parseInt(16)) {
  $('.result').find(".blog4").css('display', 'flex');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="que1 que">question1</p>
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>


<p class="que2 que">question2</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que3 que">question3</p>
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que4 que">question4</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que5 que">question5</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

在此，如果 que5 选择了答案 rank_1，则我设置了条件，然后根据所选答案设置排名 16，否则排名计数。

但是当我按照

if (i == 5 && rank_count[1] == 'rank_1') 
    {
        rank = parseInt(16);
       console.log(rank);
    }else{
       rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));
       console.log(rank);
    }

它没有显示正确的结果或显示 2 结果 blog3 或 blog4

我不知道为什么会这样

谁能帮我解决这个问题

标签： javascriptjqueryhtml

Answer 1

需要在三个地方进行更改。
1. 定义长度变量为var length = $("p[class^='que']").length;
2. 在 HTML <p> 标签应该在所有 span 元素之后结束，$('.que' + i).find(".selected_answer")这样才能找到带有 . selected_answer类
3. for循环内的条件应包括 <= 以便它到达 5

//var $ = jQuery;
var rank = 0;
var length = $("p[class^='que']").length;

for (i = 1; i <= length; i++) {

  var rank_count = ($('.que' + i).find(".selected_answer").attr("class").split(/\s+/));
  //var rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));
  
  if (i == 5 && rank_count[1] == 'rank_1') {
    rank = parseInt(16);
    
    //console.log(rank);
  } else {
    rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_', ''));
    //
    console.log(rank);
  }

}
alert(rank);
// if rank between 0-4 then show this
if (rank >= parseInt(0) && rank <= parseInt(4)) {
  $('.result').find(".blog1").css('display', 'flex');
}
// if rank between 5-8 then show this
if (rank >= parseInt(5) && rank <= parseInt(8)) {
  $('.result').find(".blog2").css('display', 'flex');
}
// if rank between 9-12 then show this
if (rank >= parseInt(9) && rank <= parseInt(12)) {
  $('.result').find(".blog3").css('display', 'flex');
}
// if rank between 13-16 then show this
if (rank >= parseInt(13) && rank <= parseInt(16)) {
  $('.result').find(".blog4").css('display', 'flex');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="que1">question1
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>

<p class="que2">question2
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que3">question3
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que4">question4
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que5">question5
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>