Javascript递增和递减不适用于querySelector

Question

在我的代码中，我创建了next和previous函数，该函数将递增和递减值onclick并使用该值在我的代码中选择html元素。 next工作正常，但previous返回null。

HTML代码包含data-parentid 这个想法是的值应该等于parentid的我已经在我的标记中。

<div class="col-lg-12 floatChildLeft" data-parentid="2"> 
      <div id="child-2"> 
      <div class="col-lg-3" data-option="a"> 
       <input type="radio" name="1" value="1-2" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
       <label class="answer">I always have emergencies, but have no savings, which is why I need to borrow money.</label> 
      </div> 
      <div class="col-lg-3" data-option="b"> 
       <input type="radio" name="1" value="3-5" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
       <label class="answer">I have emergencies but my savings is not usually enough to cover it, so I borrow sometimes.</label> 
      </div> 
      <div class="col-lg-3" data-option="c"> 
       <input type="radio" name="1" value="6-8" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
       <label class="answer">I have emergencies but have enough money to cover most of it.</label> 
      </div> 
      <div class="col-lg-3" data-option="d"> 
       <input type="radio" name="1" value="9-10" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
       <label class="answer">I have an emergency fund dedicated for this; emergencies are rarely a problem.</label> 
      </div> 
      </div> 
      <div class="col-lg-12 hidden" id="scale-2"></div> 
     </div> 

我的JS代码

var currentOption; //the variable tracking the increment and decrement 
    window.addEventListener('click', function(e){ 
    var option = document.querySelector(`div[data-parentid="${e.path['0'].id}"]`); 
    if(!option) return; 

    $("#modal-body").html("<p id='response'>Option "+e.path['0'].id+"</p>") 
    $("#modal-body").append(option); 

    currentOption = e.path['0'].id; //assigning the variable to the selected id  
    $("#modal").trigger('click'); 
     //this function works just fine 
    }); 

function proceed(next, prev){ 
    currentOption = Number(currentOption); 
    if(next){ 
     currentOption++; 
    }else{ 
     currentOption--; 
    } 
     var nextOption = document.querySelector(`div[data-parentid="${currentOption}"]`); 
      if(!nextOption) return; 
      $("#modal-body").html("<p>"+currentOption+"</p>"); 
      $("#modal-body").append(nextOption); 
} 

我的HTML

<div class="col-lg-12"> 
    <div class="container-fluid"> 
       <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left"> 
       <div role="document" class="modal-dialog"> 
        <div class="modal-content"> 
        <div class="modal-header"> 
         <h4 id="exampleModalLabel" class="modal-title">Click below which option best describes you</h4> 
         <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> 
        </div> 
        <div class="modal-body" id="modal-body"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-primary" onclick="proceed(false, true)">Prev</button> 
         <button type="button" class="btn btn-primary" onclick="proceed(true, false)">Next</button> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

只有你需要的就是分配变量东西值0 var currentOption=0;因此，这将是一个整数类型现在它会工作。

var currentOption = 0; //the variable tracking the increment and decrement 
 
window.addEventListener('click', function(e) { 
 
    var option = document.querySelector(`div[data-parentid="${e.path['0'].id}"]`); 
 
    if (!option) return; 
 

 
    $("#modal-body").html("<p id='response'>Option " + e.path['0'].id + "</p>") 
 
    $("#modal-body").append(option); 
 

 
    currentOption = e.path['0'].id; //assigning the variable to the selected id  
 
    $("#modal").trigger('click'); 
 
    //this function works just fine 
 
}); 
 

 
function proceed(next, prev) { 
 

 
    currentOption = currentOption; 
 

 
    if (next) { 
 
    currentOption++; 
 
    } else { 
 
    currentOption--; 
 
    } 
 
    alert(currentOption); 
 
    //$(".modal-footer").attr('data-parentid',currentOption); 
 
    var nextOption = document.querySelector(`div[data-parentid="${currentOption}"]`); 
 
// console.log(nextOption); 
 
    if (!nextOption) return; 
 
    $("#modal-body").html("<p>" + currentOption + "</p>"); 
 
    $("#modal-body").append(nextOption); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-12"> 
 
    <div class="container-fluid"> 
 
       <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left"> 
 
       <div role="document" class="modal-dialog"> 
 
        <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <h4 id="exampleModalLabel" class="modal-title">Click below which option best describes you</h4> 
 
         <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> 
 
        </div> 
 
        <div class="modal-body" id="modal-body"> 
 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-primary" onclick="proceed(false, true)">Prev</button> 
 
         <button type="button" class="btn btn-primary" onclick="proceed(true, false)">Next</button> 
 
        </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 

 

 

 
<div class="col-lg-12 floatChildLeft" data-parentid="2"> 
 
      <div id="child-2"> 
 
      <div class="col-lg-3" data-option="a"> 
 
       <input type="radio" name="1" value="1-2" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
 
       <label class="answer">I always have emergencies, but have no savings, which is why I need to borrow money.</label> 
 
      </div> 
 
      <div class="col-lg-3" data-option="b"> 
 
       <input type="radio" name="1" value="3-5" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
 
       <label class="answer">I have emergencies but my savings is not usually enough to cover it, so I borrow sometimes.</label> 
 
      </div> 
 
      <div class="col-lg-3" data-option="c"> 
 
       <input type="radio" name="1" value="6-8" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
 
       <label class="answer">I have emergencies but have enough money to cover most of it.</label> 
 
      </div> 
 
      <div class="col-lg-3" data-option="d"> 
 
       <input type="radio" name="1" value="9-10" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> 
 
       <label class="answer">I have an emergency fund dedicated for this; emergencies are rarely a problem.</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-12 hidden" id="scale-2"></div> 
 
     </div>