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>

这只需要您维护一个功能，而不是每个链接都有多个功能。

此外，您的代码中还有额外的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>

这里的不同之处在于您的功能永远不会改变，但每次都会以不同的方式调用它。

在Javascript中点击一下即可打开3个项目

1 个答案: