时间戳

首页 > 解决方案 > 部分未显示在移动视图上

javascript - 部分未显示在移动视图上

问题描述

我网站中的一个部分没有显示在移动视图上。我确实检查了 woocommerce 和 php 文件，但一切看起来都不错。我尝试使用 !important 覆盖该部分，但仍然相同。我还添加了针对这些元素的媒体查询，但它仍然无法正常工作。本部分与 woocommerce 集成，因此，如果有任何有关 woocommerce 的输入，我也非常感谢。

所以，我可能在我的脚本中遗漏了一些东西。

jQuery('form.variations_form').on( 'show_variation', 
    function(event, variation){
      let output_date='';
      let scheduled_date_string = variation.scheduled_date;
      console.log(variation.scheduled_date);

      let button_text_original = 'Buy Online';
      let button_text_preorder = 'Pre-Order Now';

      if (!scheduled_date_string) {
        output_date= '7 - 10 Business Days';
        jQuery(this).find('button.button').html(button_text_original);
      }else{
        let current_date = new Date();
        let scheduled_date_parts = scheduled_date_string.split('/');/*date format must be in d/m/Y */
        let scheduled_date_year = parseInt(scheduled_date_parts[2].length<4 ? '20'+scheduled_date_parts[2]:scheduled_date_parts[2]);
        let scheduled_date_month = parseInt(scheduled_date_parts[1]) - 1;
        let scheduled_date_day = parseInt(scheduled_date_parts[0]);
        let scheduled_date = new Date(scheduled_date_year,scheduled_date_month,scheduled_date_day);
        console.log(scheduled_date);

        if (current_date >= scheduled_date) {
          output_date= '7 - 10 Business Days';
          jQuery(this).find('button.button').html(button_text_original);
        }else{
          output_date = scheduled_date_string;
          jQuery(this).find('button.button').html(button_text_preorder);
        }
      }

      if (jQuery('.shipping-date-container').length) {
        jQuery('.shipping-date-container').html('Estimated to leave our warehouse by: <span class="shipping-date">'+output_date+'</span>');
      }else if(jQuery('body.single-product .et_pb_wc_title').length){
        jQuery('body.single-product .et_pb_wc_title').after('<div class="shipping-date-container">Estimated to leave our warehouse by: <span class="shipping-date">'+output_date+'</span></div>');
      }

    } 
  );
/* Estimated Shipping Date */
.shipping-date-container{
    font-weight: 500;
    color: #1e1919;
    font-size: 17px;
    line-height: 1.6em;
    margin: 10px 0;
}
span.shipping-date{
    color: #a13a18;
    font-weight: 600;
}

@media screen and (max-width: 980px){
  .shipping-date-container span.shipping-date{
    display: inline-block;
  }
}
<div class="shipping-date-container">
  Estimated shipping date: 
  <span class="shipping-date">31/07/2021</span>
</div>

标签： javascripthtmljquerycss

解决方案

在同一文件中的某处使用 jQuery 或 $ 符号时存在冲突。Where is in my jQuery script 使用 jQuery 而不是 $.

推荐阅读