另一个javascript新手在这里。
我整个星期都在进行搜索,并且学到了很多但仍然无法使我的脚本正常工作。我的项目是混合PHP / Mysqli / Javascript,但我对Javascript很新。
我正在尝试使用范围滑块来选择产品,然后选择一个产品后,可以使用多个范围滑块来选择有关该产品的更多详细信息,依此类推,...
计划A是做一些事情,比如改变第二个三重滑块的不透明度,直到选择了主要产品,但是我只是试图让机制触发第二步而被卡住了太长时间。我希望使用一个简单的If语句可以做到这一点,但我似乎无法在函数之外得到任何东西来查看其中的参数值。我以为我理解范围但是我学到的规则在这种情况下工作得不太热。
这是一个非常简化的脚本,用于了解我在做什么:
<html>
<head>
<style>
input.prod_slider{
width:250px;
height:30px;
padding:10px;
background-color:gainsboro;
}
input.det_sliders{
width:250px;
height:30px;
padding:10px;
background-color:gray;
}
</style>
</head>
<body>
<input class='prod_slider' type='range' id='prod_choice' min='0' max='3' step='1' oninput='choiceSlide(value)'>
<p style='display:inline;' id='prod_777' >Use Slider To Choose A Product</p>
<!-This is the DIV I hoped to change the opacity on...>
<div id='detail_sliders'>
<input class='det_sliders'type='range' id='detail_0' min='0' max='3' step='1' ><br>
<input class='det_sliders'type='range' id='detail_1' min='0' max='3' step='1' ><br>
<input class='det_sliders'type='range' id='detail_2' min='0' max='3' step='1' ><br>
</div>
<div id='testDiv'></div>
<script>
var prodArr = ["product_1","product_2","product_3","product_4"];
var varNum1;
function choiceSlide(value_1){
key_1 = +value_1;
document.getElementById('prod_777').innerHTML = prodArr[key_1];
varNum1 = arguments[0];
return varNum1;
}
document.getElementById('testDiv').innerHTML = 'VarNum Value: ' + varNum1;
if (varNum1){
document.getElementById('detailSliders').style.opacity = '1';
}
else{
document.getElementById('detailSliders').style.opacity = '.5';
}
</script>
</body>
</html>
简化版本2:
<html>
<body>
<input class='prod_slider' type='range' id='prod_choice' min='0' max='3' step='1' oninput='choiceSlide(value)'>
<p style='display:inline;' id='prod_777' >Use Slider To Choose A Product</p>
<div id='testDiv'>Test Div</div>
<script>
var prodArr = ["product_1","product_2","product_3","product_4"];
var varNum1;
function choiceSlide(value_1){
key_1 = +value_1;
document.getElementById('prod_777').innerHTML = prodArr[key_1];
varNum1 = arguments[0];
}
document.getElementById('testDiv').innerHTML = 'VarNum Value: ' + varNum1;
</script>
</body>
可能有更好的方法来做到这一点,我很乐意听到,但我真的想知道我在将来做错了什么。非常感谢任何可以帮助我的人。谢谢!