Question

为产品详情页面制作一个表格，其中包含一行3张图片，然后是每张图片下方的一行文字，然后重复。不是让页面无限期向下滚动，我认为使用一些JS / jQuery更改每个＆lt;中的值会更好。 td＆gt; （img＆amp;匹配文本）而不是为每6个产品创建一个新页面。但是，我幼儿园级的JS让我痛苦地失败了。

虽然我认为我上面提到的问题非常明显，但我也想知道这是否应该首先设置为表格。这似乎是保持组织有序的最简单方法，但我见过的几个例子似乎是用＆lt; div＆gt;而不是表格。

这是一个JSFiddle，我正在搞乱：http://jsfiddle.net/jshweky/FgVY2/

HTML：

<table id="saladGrid">
    <tr class="saladPics">
        <td class="s1"></td>
        <td class="s2"></td>
        <td class="s3"></td>
    </tr>
    <tr class="saladTxt">
        <td class="txt">
            <p>acorn squash, golden beets, pistachios</p>
        </td>
        <td class="txt">
            <p>roasted eggplant, herbed ricotta, sumac</p>
        </td>
        <td class="txt">
            <p>arugula, fennel, blackberries, quinoa, pickled shallots</p>
        </td>
    </tr>
    <tr class="saladPics">
        <td class="s4"></td>
        <td class="s5"></td>
        <td class="s6"></td>
    </tr>
    <tr class="saladText">
        <td class="text">
            <p>arugula, orange, golden beets, golden tomatoes, pistachios</p>
        </td>
        <td class="text">
            <p>caesar</p>
        </td>
        <td class="text">
            <p>butternut squash, lime, feta, chili</p>
        </td>
    </tr>
</table>
<button id="prev">Prev</button>
<button id="next">Next</button>

CSS（释义）：

table {
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-spacing: 0;
}
td {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    vertical-align: middle;
}
#saladGrid table {
    margin: 0 auto;
    border-spacing: 30px;
}
.saladPics td {
    height: 350px;
    width: 350px;
    background-position: center;
    background-size: 415px 400px;
    background-repeat: no-repeat;
    border-radius: 250px;
    border: 1px black solid;
}
.saladText {
    position: relative;
    margin-bottom: -20px;
}
.saladPics td.s1 {
    background-image: url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");
}

我认为这是创建新的var并编写一个函数来向现有的img类添加6（例如s1变为s7等），但这只是猜测而且正如我所说，即使这是正确的，我还处于JS编码的萌芽阶段。

Answer 1

你的JavaScript交换图像工作正常，问题是你的脚本的第一部分。我在小提琴中评论它并且工作正常。肯定有更好的方法可以做到这一点（在容器中滑动DIV，在javascript中构建元素并将它们附加到页面上的框架 - 这将为您提供几乎在底部加载新元素的最佳风格效果） - 这一切都取决于关于你想如何处理它，但我的建议是使用jQuery来添加或删除DOM中的元素。

//var s7= new image();
//img.src=url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHC9Vk1U5yC5RWMhUK9Ai2RGIDCSh-wxPt-aleQm9onxi9xbN9dA');

$(document).ready(function () {
    $('#prev').click(function () {
        $('.s1').css('background-image', 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")');
    });
});

此外，这里是.css（）的替代语法，它允许您一次更改元素的多个属性（您需要使用.html（）函数来更改以下文本元素）：

$('.s1').css({backgroundImage : 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")', backgroundSize : "cover"}); });

使表动态化

1 个答案: