0

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

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

我需要做的： 创建几个可能的 URL，检查我是否猜对了 URL。如果是这样，那么我需要<div>用有效的图像 URL 替换 a 的背景图像。

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 检查都成功了吗？即使图像不存在。即使有上述变化，检查总是成功返回......

4

2 回答 2

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'); }
    });
}

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

于 2015-02-16T19:16:56.300 回答
0

所以我不得不删除该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。是否应该有某种优先系统？像“如果数据名称 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 + ')');
}
于 2015-02-16T19:29:47.903 回答