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

Question

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

有一个 javascript 函数可以为每个被调用的 css 类添加一个类object-fit- 添加的类被调用bg--image。这是为了修复 IE11 中显示的错误，其中所有图像都搞砸了。

现在的问题是，即使 css 类也被调用，有一个页面不应应用此函数object-fit。

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

有没有可能我可以添加一个 javascript 函数来不在这个特定的类上应用 IE 11 函数？不同之处在于它不应该应用的一个 img 是 a 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 } ?>

Answer 1

由于这是一个 WordPress 模板，您有几个解决方案。解决方案 1 - HTML & jQuery 修改如果您只能向该页面的 HTML 添加一个额外的类，那么将以下更新应用到该页面模板应该可以避免将 .bg--image 类添加到该页面：HTML&nbsp;<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' )){&nbsp; ?>&nbsp; &nbsp;// place your script or wp_enqueue_script() code here<?php } ?>您还可以通过页面 ID 定位准确的页面。在此示例中，您的页面 ID 将为 7。<?php if(! is_page( '7' )){&nbsp; ?>&nbsp; &nbsp;// place your script or wp_enqueue_script() code here<?php } ?>有关 WordPress 条件的更多信息：https : //codex.wordpress.org/Conditional_Tags