在我的代码中，我创建了一个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>
答案 0 :(得分：0)
只有你需要的只是将变量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>