Question

我正在使用Wordpress中的模板，该模板由其他人设置，因此我需要修复某些问题。

有一个javascript函数可将一个类添加到每个名为object-fit的css类中-添加的类称为bg--image。这是为了修复IE11中显示的错误，其中所有图像都混乱了。

现在的问题是，即使css类也称为object-fit，在该页面上也不应应用此功能。

我对如何在这里工作感到有些困惑。因为我不想弄乱整个主题，并且我的编码选项非常有限，所以这只是在我脑海里打个结。

是否有可能我可以添加一个javascript函数以不将IE 11函数应用于这一特定类？区别在于，一个不应该应用的img是span，另一个不适用。

有什么想法吗？

try {
  if (ie_ver() == 11) {
    var $img = $('.banner--small').find('img');
    $('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
    $('.banner--small').addClass('bg--image');
    $img.addClass('hidden');

    var $img2 = $('.object-fit').find('img');
    $('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
    $('.object-fit').addClass('bg--image');
    $img2.addClass('hidden');

    $('.slick__inner').each(function() {
      var $img3 = $(this).find('img');
      $(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
      $(this).addClass('bg--image');
      $img3.attr('style', 'display:none');
    });

<div class="article--text">
  <div class="container container--tiny spacing--huge">
    <?php the_content(); ?>
  </div>
  <div class="container margin-bottom--huge">
    <?php if (get_field('direktionen')) { ?>
    <div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
      <?php foreach (get_field('direktionen') as $key => $child) { ?>
      <div class="flex__item one-third lg-one-half xs-one-whole">
        <a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
          <span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>" 
          srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x" 
          alt="<?php echo $child['name']; ?>" /></span>
          <h3>
            <?php echo $child['name']; ?>
          </h3>
          <p>
            <?php echo $child['adresse']; ?>
          </p>
        </a>
      </div>
      <?php } ?>
    </div>
    <?php } else if ($children) { ?>
    <div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
      <?php foreach ($children as $key => $child) { ?>
      <div class="flex__item one-third lg-one-half xs-one-whole">
        <a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
          <span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>" 
          srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
          alt="<?php echo $child->post_title; ?>" /></span>
          <h3>
            <?php echo $child->post_title; ?>
          </h3>
          <p>
            <?php echo get_field('adresse', $child->ID); ?>
          </p>
        </a>
      </div>
      <?php } ?>
    </div>
    <?php } ?>
  </div>
</div>

Answer 1

由于这是WordPress模板，因此您有两种解决方案。

解决方案1-HTML和jQuery修改

如果您可以仅向该页面的HTML添加其他类，则对此页面模板应用以下更新应避免在此页面上添加.bg--image类：

HTML

 <span class="object-fit avoid-change">

jQuery

$('.object-fit').not( '.avoid-change' ).addClass('bg--image');

有关jQuery .not（）方法的更多信息： https://api.jquery.com/not/

解决方案2-有条件的WordPress

另一种选择是使用有条件的WordPress，以避免在此页面上运行整个脚本。

您可以使用以下命令阻止脚本加载到该模板中：

<?php if(! is_page_template( 'your-template-name.php' )){  ?>
   // place your script or wp_enqueue_script() code here
<?php } ?>

您还可以通过页面ID定位确切的页面。在此示例中，您的页面ID为7。

<?php if(! is_page( '7' )){  ?>
   // place your script or wp_enqueue_script() code here
<?php } ?>

有关WordPress条件的更多信息： https://codex.wordpress.org/Conditional_Tags

JavaScript-不要为特定的CSS类添加类

1 个答案: