javascript - 不要为特定的 css 类添加类

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