如何使用jquery控制圖片擴展？

Question

當我懸停在我的鏈接上，然後我的主圖像正在改變，但如果我的圖像沒有任何擴展例如.jpeg，.jpg,.png或.gif那麼不要改變圖像我怎麼能做到這一點？

由我data-img在我a

$(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

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

你聲明數組 arr方式

$(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>