在Javascript中點擊一下即可打開3個項目

Question

我正在開展一個學校項目，只需點擊一次即可打開多個文檔。我正在使用圖像滑塊，並設法讓它打開多個鏈接。但是，一旦我將相同的JavaScript添加到滑塊上的另一個圖像上，它將像以前一樣打開相同的圖像，即使我已經對源代碼進行了加密。

<img src="promo.png" img class="carousel-image" onclick="doOpen()"> 


    <script type="text/javascript"> 
function doOpen() 
{ 
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" img class="carousel-image" onclick="doOpen()"> 

<script type="text/javascript"> 
function doOpen() 
{ 
window.open("screensaver.mp4"); 
window.open("Billboard.png"); 
window.open("Tshirt.png"); 


} 
</script> 

      <div class="carousel-caption"> 

滑塊上開ticket.png和pattern.png兩個圖像。

Answer 1

您正在定義相同的功能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> 

這將只需要你保持一個功能VS然而，許多爲每個鏈接你。

此外，你必須在你的代碼中的多餘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> 

這裏的區別是，你的函數永遠不會改變，但你每次都調用它不同。