[英]Javascript: Radio button and displaying images based on a vaule
我目前正在根据从单选按钮选择的值来显示图像。 但是我目前遇到了使代码尽可能短而有效的问题。 我有几种类别可供选择,而我要解决此问题的方式将要求我编写多个check_value#
。 有没有办法结合这两个功能? 因此,将来如果我有5或7个类别,我将不必为每个类别都有一个功能。 例
<script>
function check_value(val) {
var el = document.getElementById("imgBox1");
var img = imgs[val];
if (val>0 && val<4) { //will trigger when [1,2,3]
el.src = "images/bike" + val + ".jpg";
el.style.display = "";
}
}
function check_value1(val) {
var el = document.getElementById("imgBox2");
var img = imgs[val];
if (val>0 && val<4) { //will trigger when [1,2,3]
el.src = "images/tire" + val + ".jpg";
el.style.display = "";
}
}
</script>
的HTML
<h2>Choose a bike</h2>
<form name="builder">
<input type="radio" name="field" value="1" onclick='check_value(0)'/> KAWASAKI KX 450F<br />
<input type="radio" name="field" value="2" onclick='check_value(1)'/> 2010 Yamaha Road Star S<br />
<input type="radio" name="field" value="3" onclick='check_value(2)'/> Aprilia RSV4<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire">
<input type="radio" name="field" value="1" onclick='check_value1(0)'/> Michelin Pilot Road 3 Tires<br />
<input type="radio" name="field" value="2" onclick='check_value1(1)'/> Dunlop Roadsmart Sport-Touring Tires<br />
<input type="radio" name="field" value="3" onclick='check_value1(2)'/> Pirelli Scorpion Trail Tires<br />
</form>
<img id="imgBox2" src="#" style="display:none">
这是使用自定义HTML属性和jQuery Javascript库为您准备的小提琴:
显然,您确实希望设置图像的来源,而不是在段落中显示url,但是我敢肯定,您会想到的。
// html
<input type="radio" name="tire" img-preview="tire-preview" img-loc="tire/1.jpg" /> First<br>
<input type="radio" name="tire" img-preview="tire-preview" img-loc="tire/2.jpg" /> Second<br>
<p id="tire-preview">
Load: -
</p>
<input type="radio" name="wheel" img-preview="wheel-preview" img-loc="wheel/1.jpg" /> Uno<br>
<input type="radio" name="wheel" img-preview="wheel-preview" img-loc="wheel/2.jpg" /> Dos<br>
<p id="wheel-preview">
Load: -
</p>
// js
$("input[type=radio]").click(function(){
var imageUri = "http://site.com/images/" + $(this).attr("img-loc");
$("#" + $(this).attr("img-preview") ).text("Load: " + imageUri);
});
试试这个,更新
将图像名称命名为bike#.jpg,tire#.jpg bike0.jpg,bike1.jpg,bike2.jpg ....
function check_value(val, id, type) {
var el = document.getElementById("imgBox" + id);
if (val>0 && val<4) { //will trigger when [1,2,3]
el.src = "images/"+ type + val + ".jpg";
el.style.display = "";
}
}
<h2>Choose a bike</h2>
<form name="builder">
<input type="radio" name="field" value="1" onclick='check_value(0, 1, "bike")'/> KAWASAKI KX 450F<br />
<input type="radio" name="field" value="2" onclick='check_value(1, 1, "bike")'/> 2010 Yamaha Road Star S<br />
<input type="radio" name="field" value="3" onclick='check_value(2, 1, "bike")'/> Aprilia RSV4<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire">
<input type="radio" name="field" value="1" onclick='check_value(0, 2, "tire")'/> Michelin Pilot Road 3 Tires<br />
<input type="radio" name="field" value="2" onclick='check_value(1, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires<br />
<input type="radio" name="field" value="3" onclick='check_value(2, 2, "tire")'/> Pirelli Scorpion Trail Tires<br />
</form>
<img id="imgBox2" src="#" style="display:none">
你可以用这个
<script>
function call(formNo,val)
{if()//give your checkings here according to what you want
{}
alert(formNo+" "+val); //just for example what values you are getting
}
</script>
<h2>Choose a bike</h2>
<form name="builder" id="1">
<input type="radio" name="field" value="1" onclick='check_value(1,0)'/> KAWASAKI KX 450F<br />
<input type="radio" name="field" value="2" onclick='check_value(1,1)'/> 2010 Yamaha Road Star S<br />
<input type="radio" name="field" value="3" onclick='check_value(1,2)'/> Aprilia RSV4<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire" id="2">
<input type="radio" name="field" value="1" onclick='check_value1(2,0)'/> Michelin Pilot Road 3 Tires<br />
<input type="radio" name="field" value="2" onclick='check_value1(2,1)'/> Dunlop Roadsmart Sport-Touring Tires<br />
<input type="radio" name="field" value="3" onclick='check_value1(2,2)'/> Pirelli Scorpion Trail Tires<br />
</form>
<img id="imgBox2" src="#" style="display:none">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.