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

 <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