在我的代碼中,我創建了next
和previous
函數,該函數將遞增和遞減值onclick
並使用該值在我的代碼中選擇html
元素。 next
工作正常,但previous
返回null
。Javascript遞增和遞減不適用於querySelector
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>
這就是你如何學會使用[模板文字(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) ? – Teemu
你能提供一個最小的「工作」例子嗎?如果我知道的話,您的HTML – lumio
@Teemu中沒有數據殘差,我不會在這裏 – goodhand