同じ関数を2回定義していますdoOpen
。それはうまくいきません。簡単な修正については、これを試してください。
<img src="promo.png" class="carousel-image" onclick="doOpen1()">
<script type="text/javascript">
function doOpen1()
{
window.open("Ticket.png");
window.open("Pattern.png");
}
</script>
<div class="carousel-caption">
<p>
The Complete set of useful documents
</p>
</div>
</div>
<div class="carousel-feature">
<img src="promo.png" class="carousel-image" onclick="doOpen2()">
<script type="text/javascript">
function doOpen2()
{
window.open("screensaver.mp4");
window.open("Billboard.png");
window.open("Tshirt.png");
}
</script>
とはいえ、すべてのリンクに対してこのような関数を定義することは、堅牢なソリューションではありません。さらに良いものは次のとおりです。
<script type="text/javascript">
function doOpen(which)
{
if(which == "one"){
window.open("Ticket.png");
window.open("Pattern.png");
} else if (which == "two"){
window.open("screensaver.mp4");
window.open("Billboard.png");
window.open("Tshirt.png");
}
}
</script>
<div class="carousel-feature">
<img src="promo.png" class="carousel-image" onclick="doOpen('one')">
</div>
<div class="carousel-feature">
<img src="promo.png" class="carousel-image" onclick="doOpen('two')">
</div>
これには、1つの関数を維持するだけで済みますが、リンクごとに多くの関数を維持する必要があります。
img
また、タグに余分なものがあります。
<img src="promo.png" img class="carousel-image" onclick="doOpen2()">
^^^ Here
<!-- Should Be: -->
<img src="promo.png" class="carousel-image" onclick="doOpen2()">
Jasonによって提案されたオプションは次のようになります。
<script type="text/javascript">
function doOpen()
{
for (var i = 0; i < arguments.length; i++){
window.open(arguments[i]);
}
}
</script>
<div class="carousel-feature">
<img src="promo.png" class="carousel-image" onclick="doOpen('Ticket.png', 'Pattern.png')">
</div>
<div class="carousel-feature">
<img src="promo.png" class="carousel-image" onclick="doOpen('screensaver.mp4', 'Billboard.png','Tshirt.png')">
</div>
ここでの違いは、関数が変更されることはありませんが、毎回異なる方法で呼び出すことです。