javascript - 如何用jquery控制图片扩展？

Question

当我将鼠标悬停在我的链接上时，我的主图像会发生变化，但如果我的图像没有任何扩展名，例如 .jpeg,.jpg,.png 或 .gif 然后不要更改图像我该怎么做？

顺便说一下，我的 a 中有 data-img

$(function() {
 $(".lazy").lazy();
});


$(".tur-list-box,.otel-list-box,.cruise-box").hover(function() {
    $(this).find(".tur-list-toggle").stop().slideDown();
    $(this).find(".open-tur-toggle").stop().removeClass("ani-icon-right-chevron").addClass("ani-icon-chevron-pointing-to-the-left");
}, function(e) {
    var getDefaultImg = $(this).find("figure img").attr("data-default");
    $(this).find("figure img").fadeIn(300, function() {
        $(this).attr("src", getDefaultImg);
    })
    $(this).find(".tur-list-toggle").stop().slideUp();
    $(this).find(".open-tur-toggle").stop().removeClass("ani-icon-chevron-pointing-to-the-left").addClass("ani-icon-right-chevron");
});

$('.tur-list-toggle ul li a,.hotel-links ul li a,.cruise-list-box ul li a').hover(
    function(e) {
        e.preventDefault();
        var getAttr = $(this).attr("data-img");
        var defaultImage = $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find(".default-img").attr("data-default");

        if (getAttr.length > 0 || getAttr !== undefined) {
            $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find("img").fadeOut(250, function() {
                $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find("img").attr("src", getAttr);
                $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find("img").fadeIn(250)
            })
        } else {
            $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find(".default-img").attr("src", defaultImage);
        }
    },
    function(e) {

    }
);

.tur-list-box{
  width:250px;
height:400px;
}
.tur-list-box img{
width:250px;
  height:110px;
}

<div class="tur-list-box">

  <div class="tur-list-content">
    <figure>
      <img data-src="https://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg" class="lazy" src="img/assets/placeholder.png" data-default="https://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg"
        alt="tur sayfası">
    </figure>
    <!-- tur resim-->


  </div>
  <!-- tur list content-->

  <div class="tur-list-toggle">
    <ul class="list-unstyled">
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Image 1</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Image 2</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA">No Image Ext </a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Image 4</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja">No Image Ext</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Image 6</a></li>
    </ul>
  </div>
  <!-- acilir kapanir alan-->

</div>
<!-- tur list box-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>

Answer 1

尝试使用 split(".") src 然后 pop()使用最后一个参数，然后使用 Array#includes

与声明的数组 arr 匹配

var arr=['jpg','jpeg','png','svg'] 
 if(!arr.includes(getAttr.split('.').pop())){
    console.log('invalid format')
     return false;
    }

$(function() {
 $(".lazy").lazy();
});

var arr=['jpg','jpeg','png','svg'] // add format as your requirement

$(".tur-list-box,.otel-list-box,.cruise-box").hover(function() {
    $(this).find(".tur-list-toggle").stop().slideDown();
    $(this).find(".open-tur-toggle").stop().removeClass("ani-icon-right-chevron").addClass("ani-icon-chevron-pointing-to-the-left");
}, function(e) {
    var getDefaultImg = $(this).find("figure img").attr("data-default");

    $(this).find("figure img").fadeIn(300, function() {
        $(this).attr("src", getDefaultImg);
    })
    $(this).find(".tur-list-toggle").stop().slideUp();
    $(this).find(".open-tur-toggle").stop().removeClass("ani-icon-chevron-pointing-to-the-left").addClass("ani-icon-right-chevron");
});

$('.tur-list-toggle ul li a,.hotel-links ul li a,.cruise-list-box ul li a').hover(
    function(e) {
        e.preventDefault();
        var getAttr = $(this).attr("data-img");
        var defaultImage = $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find(".default-img").attr("data-default");

    if(!arr.includes(getAttr.split('.').pop())){
    console.log('invalid format')
     return false;
    }
        if (getAttr.length > 0 || getAttr !== undefined) {
            $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find("img").fadeOut(250, function() {
                $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find("img").attr("src", getAttr);
                $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find("img").fadeIn(250)
            })
        } else {
            $(this).parents(".tur-list-box,.otel-list-box,.cruise-box").find(".default-img").attr("src", defaultImage);
        }
    },
    function(e) {

    }
);

.tur-list-box{
  width:250px;
height:400px;
}
.tur-list-box img{
width:250px;
  height:110px;
}

<div class="tur-list-box">

  <div class="tur-list-content">
    <figure>
      <img data-src="https://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg" class="lazy" src="img/assets/placeholder.png" data-default="https://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg"
        alt="tur sayfası">
    </figure>
    <!-- tur resim-->


  </div>
  <!-- tur list content-->

  <div class="tur-list-toggle">
    <ul class="list-unstyled">
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Image 1</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Image 2</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA">No Image Ext </a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Image 4</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja">No Image Ext</a></li>
      <li><a href="#" data-img="https://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Image 6</a></li>
    </ul>
  </div>
  <!-- acilir kapanir alan-->

</div>
<!-- tur list box-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>