Question

我一直在向我们的主页添加门票销售，但它大大减慢了网站的速度。我们这个季节有大约1250个节目，尽管在主页上添加了这个节目，但是人们正在抱怨速度。

目前我正在使用javascript：showhide将购票信息保存在隐藏的div中，当您点击购买门票时显示该信息。

我希望它不会在隐藏的div中运行任何东西，除非单击购买票据按钮。然后它会提取票务信息并填充div。

我们一次会在页面上有大约300个票务脚本，如Show1-Oct，Show2-Oct，Show3-Oct，Show1-Nov，Show2-Nov，Show3-Nov等等。

非常感谢任何想法或帮助。

<div class='topShow bg-Show-Main'>
  <a href='Show1.php'><img alt='Show1' title='Show1' src='images/show/Show1.jpg'>
    <p class='title'>Show1</p>
    <p>Opens October 30th</p>
  </a>
  <div class='btnContainer2'>
    <a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show1.php'>More info</a>
    <a class='btn2 red' style="text-align: right; width:50%;  display: inline-block;" href="javascript:showhide('Show1-Oct')">Buy Tickets</a>
  </div>
  <div id="Show1-Oct" style="display:none;">
    <script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=15&locale=1"></script>
  </div>
  <div class='clear'></div>
</div>
<div class='topShow bg-Show-Main'>
  <a href='Show2.php'><img alt='Show2' title='Show2' src='images/show/Show2.jpg'>
    <p class='title'>Show2</p>
    <p>Opens October 31st</p>
  </a>
  <div class='btnContainer2'>
    <a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show2.php'>More info</a>
    <a class='btn2 red' style="text-align: right; width:50%;  display: inline-block;" href="javascript:showhide('Show2-Oct')">Buy Tickets</a>
  </div>
  <div id="Show2-Oct" style="display:none;">
    <script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=16&locale=1"></script>
  </div>
  <div class='clear'></div>
</div>

Answer 1

为页面上的每个元素加载单独的javascript文件是真的坏主意。

更合理的设计是使用一个脚本，在需要时（当用户点击“购买门票”按钮时）为每个列表发出必要数据的ajax调用并将其注入页。这些内容:(从您的示例代码中删除了一些无关的HTML，但您会得到这个想法）

＆＃13;

$('.btn2').on("click", function() {
  var myId = $(this).parent().next().attr("id"); // or store this as a data attribute on the button or somewhere else conveniently accessible
  console.log("Get data for ", myId);
  $.get("/whatever?id=" + myId, function(response) {
    // assuming that ajax call returns html, just inject it into the div:
    $('#" + myId').html(response);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topShow bg-Show-Main'>
  <div class='btnContainer2'>
    <a href="#" class='btn2 red'>Buy Tickets</a>
  </div>
  <div id="Show1-Oct">
  </div>
  <div class='clear'></div>

  <div class='btnContainer2'>
    <a href="#" class='btn2 red'>Buy Tickets</a>
  </div>
  <div id="Show2-Oct">
  </div>
  <div class='clear'></div>

</div>

＆＃13;

如何在点击按钮之前忽略javascript，然后运行

1 个答案: