Javascript递增和递减在querySelector上不起作用

Question

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

包含data-parentid的HTML代码我的想法是下面的currentOption的值应该等于我的标记中已经有的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

您唯一需要做的就是将变量currentOption赋值为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>

​