如何创建可能的图像URL，并检查它们是否存在于jQuery中

Question

好吧，长话短说，我们公司从一家公司购买了一个网站。 他们有自己的语言，类似于Smarty。 他们在为我们“创建”的模板中内置了一组非常粗糙的功能。 该模板不提供显示购物车图像的功能。 因此，我必须“猜测”图像的URL是什么。

由于无法在模板中创建任何类似PHP的函数，因此必须使用javascript / jQuery。

我需要做的：创建一些可能的URL，检查是否正确猜出了该URL。 如果是这样，那么我需要用有效的图像URL替换<div>的背景图像。

HTML

<ul id="session-menu">

    <li class="drop-down cart">

        <a href="/store/go/basket/" class="icon-cart">
            Shopping Cart
        </a>

        <div class="drop drop-right">
            <ul>
                <li data-name="Intel i7 4770K" data-code="intel-4770k" data-qty="1">
                    <div class="image">
                        <a href="/Intel-i7-4770K/"></a>
                    </div>
                    <div class="text">
                        <a href="/Intel-i7-4770K/">Intel 4770K</a>
                        <span class="qty">Quantity: 1</span>
                        <span class="price">Price: $275</span>
                    </div>
                </li>
            </ul>
        </div>

    </li>

</ul>

JS

var dirs = '/product_images/18/4301/';
var ext = '.jpg';
var element = $('#session-menu .cart li');

$('#session-menu .cart li').each(function(){
    var data = $(this).data();
    for (var i in data){
        console.log(data[i]);
        checkUrl(createUrl(data[i]));
    }
});

function createUrl(val) {
    var imgStr = dirs + val.replace(/ |\.|\//g, '-').replace(/"|'/g, '').toLowerCase().toString() + ext;

    console.log(imgStr + ' has been made');

    return imgStr;
}

function checkUrl(img) {
    $.ajax({
        url: img,
        type: "HEAD",
        success: function() { console.log(img + ' exists'); changeBgImg(img); },
        error: function () { console.log(img + ' does not exist'); }
    });
}

function changeBgImg(img) {
    $('#session-menu .cart li .image').children('a').css('background-image', img);
}

映像（如果存在）的格式为“ / product_images / 18/4301 / intel-i7-4770k”，“ / product_images / 18/4301 / intel-4770k”或“ / product_images / 18/4301 / large” -intel-4770k”。

我确实更喜欢在jQuery插件中执行此操作，但是在尝试使其正常工作时，这对我来说只是一件复杂的事情（因为我超级生锈）。 可以通过插件形式向我展示此功能的任何人的奖励积分。

任何帮助弄清楚这一点将不胜感激。 我之前有一个不同的脚本在做基本上相同的事情，但是所有$ .ajax检查都成功返回了吗？ 即使图像不存在。 即使有上述各种变化，检查也总是能成功返回...

Answer 1

也许尝试使用获取请求？

function checkUrl(img) {
    $.ajax({
        url: img,
        type: "GET",
        success: function() { console.log(img + ' exists'); changeBgImg(img); },
        error: function () { console.log(img + ' does not exist'); }
    });
}

我只是在自己的网站上进行了测试。 链接到现有图像时，它成功返回。 链接到不存在的图像时，它返回错误。

Answer 2

因此，我不得不删除data-qty属性，因为脚本通过其中的错误进行了...我还必须通过函数传递元素的“ $（this）”，这样我才能最终更改该特定元素上的BG当我找到一个有效的图像时...看来我可以以不同的方式构造此脚本，以避免不得不通过多个函数传递该脚本...也许只是在函数外部设置一个变量...是的：)

HTML

<ul id="session-menu">

    <li class="drop-down cart">

        <a href="/store/go/basket/" class="icon-cart">
            Shopping Cart
        </a>

        <div class="drop drop-right">
            <ul>
                <li data-name="Intel i7 4770K" data-code="intel-4770k">
                    <div class="image">
                        <a href="/Intel-i7-4770K/"></a>
                    </div>
                    <div class="text">
                        <a href="/Intel-i7-4770K/">Intel 4770K</a>
                        <span class="qty">Quantity: 1</span>
                        <span class="price">Price: $275</span>
                    </div>
                </li>
            </ul>
        </div>

    </li>

</ul>

JS对我来说仍然很不愉快。 似乎可以更好地构成它。 就像我说的那样，我将需要在我们网站上的其他一些功能上执行此功能集。 拥有一个插件会很好，但是更整洁...

另外，似乎我正在猜测多个有效的URL（我检查了-并且正在为每个项目找到多个图像）。 因此，当找到有效网址时，如何调整以下内容以退出猜测网址。 并且应该有某种优先权制度吗？ 像“如果数据名称URL和数据代码有效然后使用数据名称URL”？

JS

var dirs = '/product_images/18/4301/';
var ext = '.jpg';
var element = $('#session-menu .cart li');

element.each(function(){
    var data = $(this).data();
    for (var i in data){
        checkUrl(createUrl(data[i]), $(this));
    }
});

function createUrl(val) {
    var imgStr = dirs + val.replace(/ |\.|\//g, '-').replace(/"|'/g, '').toLowerCase().toString() + ext;

    return imgStr;
}

function checkUrl(img, el) {
    $.ajax({
        url: img,
        type: "HEAD",
        success: function() { console.log(img + ' exists, changing background image...'); changeBgImg(img, el); },
        error: function () { console.log(img + ' does not exist'); }
    });
}

function changeBgImg(img, el) {
    el.find('.image a').css('background-image', 'url(' + img + ')');
}