javascript - Javascript 代码在 Safari（桌面和移动设备）上不起作用

Question

我有以下 js 文件无法在 Safari 上运行（在 Chrome 上运行良好）。

该网站基于 Ruby on Rails 框架构建，并默认安装了 Babel。

这是 Heroku 登台网站的链接：https ://mangolab-v1.herokuapp.com/

第一个 js 文件，点击后会出现 html 的内容：

const initItServicesClick = () => {
  const selectElement = (element) => document.querySelector(element);
  const ItBtns = document.querySelectorAll('.home-btn');

  const title = document.getElementById('it-services-title');
  const text = document.getElementById('it-services-description');

  // Content to be changed:
  const webDevTitle = 'Website Development';
  const webDevText = 'Dive into our deep web development expertise to build any web solution your company feels the need to receive: from single-page websites to online stores and including everything in between.';

  const mobileAppTitle = 'Mobile Application';
  const mobileAppText = 'Get the best experience for your users utilizing the expertise of MangoLab mobile software developers. We build Android, iOS, and PWA solutions to meet all the modern requirements and utilize best practices in terms of functionality, security, scalability and other parameters.';

  const prodDesignTitle = 'Product Design';
  const prodDesignText = 'MangoLab delivers value to customers by focusing on their needs and understanding their behavior. We believe that the most effective way to introduce technology into an organization is by delivering a user-friendly interface and delivering outstanding user experience. Naturally, those are the services we focus on.';

  const analyticTitle = 'Analytics & SEO';
  const analyticText = 'Develop sustainable strategies to bring more traffic, boost sales and increase sign ups thanks to our team of experts that will optimize each part of your product.';

  const apiDevTitle = 'API Development';
  const apiDevText = 'At MangoLab, we deliver web API development services, enabling smooth integration with your existing apps. According to your specific requirements, we will help you to streamline business processes, while leveraging reliable and secure development approaches.';



  ItBtns.forEach(btn => {
      btn.addEventListener('click', (event) => {
          event.preventDefault();

          if (btn.innerText === 'WEB DEVELOPMENT') {
            title.innerText = webDevTitle;
            text.innerText = webDevText;
          } else if (btn.innerText === 'MOBILE APPLICATION') {
            title.innerText = mobileAppTitle;
            text.innerText = mobileAppText;
          } else if (btn.innerText === 'PRODUCT DESIGN') {
            title.innerText = prodDesignTitle;
            text.innerText = prodDesignText;
          } else if (btn.innerText === 'ANALYTICS & SEO') {
            title.innerText = analyticTitle;
            text.innerText = analyticText;
          } else if (btn.innerText === 'API DEVELOPMENT') {
            title.innerText = apiDevTitle;
            text.innerText = apiDevText;
          }
        }
      })
  })


}

export {
  initItServicesClick
};

<div class="left-side">
  <%= link_to "#", class: "home-btn home-btn-black active" do %>
    <span class="btn-title">WEB DEVELOPMENT</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">MOBILE APPLICATION</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">PRODUCT DESIGN</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">ANALYTICS & SEO</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">API DEVELOPMENT</span>
  <% end %>
</div>


<div class="right-side" id="it-services-text">
  <div class="it-services-head">
    <h3 id="it-services-title">Website Development</h3>
    <div id="it-services-mangobar"></div>
  </div>
  <p id="it-services-description">Dive into our deep web development expertise to build any web solution your company   feels the need to receive: from single-page websites to online stores and including everything in between.</p>
  <div class="it-services-btn">
    <%= link_to services_path, class: "home-small-btn" do %>
      <span>LEARN MORE</span>
    <% end %>
  </div>
</div>

第二个 js 文件，行为相同，但对于移动视图，div 高度增加，显示内容：

const initItServicesClickV2 = () => {
  const selectElement = (element) => document.querySelector(element);
  const ItBtnsV2 = document.querySelectorAll('.home-btn-v2');


  ItBtnsV2.forEach(btn => {
    btn.addEventListener('click', (event) => {
      event.preventDefault();
      const textHeight = btn.nextElementSibling.offsetHeight;

      if (btn.classList != 'home-btn-black-v2') {
        selectElement('.home-btn-v2.home-btn-black-v2.active-v2').classList.remove('home-btn-black-v2', 'active-v2');
        btn.classList.add('home-btn-black-v2', 'active-v2');
      }
        
      if (!btn.parentElement.classList.contains('show-description')) {
        selectElement('.section.show-description').style.height = '44px';
        selectElement('.section.show-description').classList.remove('show-description');
        btn.parentElement.classList.add('show-description');
        
        if (btn.innerText === 'WEB DEVELOPMENT') {
          btn.parentElement.style.height = `${88 + textHeight}px`;
        } else if (btn.innerText === 'MOBILE APPLICATION') {
          btn.parentElement.style.height = `${88 + textHeight}px`;
        } else if (btn.innerText === 'PRODUCT DESIGN') {
          btn.parentElement.style.height = `${88 + textHeight}px`;
        } else if (btn.innerText === 'ANALYTICS & SEO') {
          btn.parentElement.style.height = `${88 + textHeight}px`;
        } else if (btn.innerText === 'API DEVELOPMENT') {
          btn.parentElement.style.height = `${88 + textHeight}px`;
        }

      }

    })
  })


}

export { initItServicesClickV2 };

 <div class="left-side">
  <%= link_to "#", class: "home-btn home-btn-black active" do %>
    <span class="btn-title">WEB DEVELOPMENT</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">MOBILE APPLICATION</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">PRODUCT DESIGN</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">ANALYTICS & SEO</span>>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">API DEVELOPMENT</span>
  <% end %>
</div>

 <div class="right-side" id="it-services-text">
  <div class="it-services-head">
    <h3 id="it-services-title">Website Development</h3>
    <div id="it-services-mangobar"></div>
  </div>
  <p id="it-services-description">Dive into our deep web development expertise to build any web solution your company feels the need to receive: from single-page websites to online stores and including everything in between.</p>
  <div class="it-services-btn">
    <%= link_to services_path, class: "home-small-btn" do %>
      <span>LEARN MORE</span>
    <% end %>
  </div>
</div>

标签： javascriptiosruby-on-railssafari