4

現在、ラジオ ボタンから選択した値に基づいて画像を表示する作業を行っています。しかし、私は現在、コードをできるだけ短く効率的にするという壁にぶつかっています。選択できるカテゴリがいくつかありますが、問題にアプローチしている方法では、いくつか書く必要がありますcheck_value#。これら2つの機能を組み合わせる方法はありますか? したがって、将来、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">
4

3 に答える 3

1

カスタム 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);

});​
于 2012-09-08T04:06:42.470 に答える
1

これを試して、更新

画像の名前は、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">
于 2012-09-08T04:15:22.857 に答える
0

これを使用できます

<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">
于 2012-09-08T04:45:45.900 に答える