Question

我正在构建一个汽车零件装配应用程序，并且仍在研究这些想法。

汽车零件在代表汽车图像（主舞台）的特定区域上方对齐。当用户点击相应的部件时，它会在大汽车图像上发光。

现在，我想通过在主图片的顶部显示适当的div（图像）来实现这一点，以便它有点强调某个部分。

我考虑制作一个可点击的汽车零件清单，清单项应包含： - 汽车零件图像 - 将出现在主舞台上的汽车部件的发光版本。

我相信我应该使用函数append（），它会将汽车零件列表中相应的发光图像附加到主舞台。

当我想要隐藏已附加到主舞台的图像并将其返回到列表时，会出现问题。

有更好的方法吗？

我想听听一些想法。

这就是我的代码的样子：

$(".parts li a").click(
    function () {
        if ($(this).parent().has(".glowimage")) {
            $(".main-stage").empty();
            }

            $(".main-stage").append($(this).parent().find(".glowimage").show());
            return false;
    }
);

<div class="parts">
        <ul>
            <li>
                <a href="#"><img src="images/part1.png" alt="part1"/></a>
                <span class="cloud" style="display:none">
                    this is so great it worksthis is so great it worksthis is so great it works
                </span>
                <span class="glowimage" style="background:url(images/hover1.png) no-repeat right top;">
                </span>
            </li>
            </ul>
 </div>

Answer 1

是。更好的方法是在启动时从这样的对象生成零件清单：

var partsList = {
    aPart: {
        thumbnail: 'images/apart_ts.png',
        fullSize:  'images/apart_full.png'
    }
};

然后做这样的事情：

$('div.parts li a').click(function() {
    var id = $(this).attr('id');
    $('.mainstage img.showfull_part').attr('src', partsList[id].fullSize);
});

如果您在每个id的{{1}}上设置了a属性，那么您可以有一个很好的基础来查找每次点击时放置在主要阶段的网址。< / p>

有很多很好的JS工具包用于模板化。你应该研究一下，找一个你喜欢的。他们可以使用简单的小模板和数据块轻松构建UI的大块，就像部件列表一样。

Answer 2

您可以使用汽车零件列表 - 将汽车图像设置为主列表的背景，隐藏所有列表项（每个列表项包含发光部分的透明.png，作为背景图像或内嵌图像）并使用jQuery显示/隐藏有问题的列表项？

<ul id="car">
    <li class="part1">Part description</li>
    <li class="part2">Part description</li>
    <li class="part3">Part description</li>
    <li class="part4">Part description</li>
    <li class="part5">Part description</li>
</ul>

<ul id="parts">
    <li class="part1"><a href="car" rel="part1">Part description</a></li>
    <li class="part2"><a href="car" rel="part2">Part description</a></li>
    <li class="part3"><a href="car" rel="part3">Part description</a></li>
    <li class="part4"><a href="car" rel="part4">Part description</a></li>
    <li class="part5"><a href="car" rel="part5">Part description</a></li>
</ul>

$('#parts').find('li a').bind('click', function(e){
    var item = $(this).attr('rel');
    $('#car').find('li').hide();
    $('#car').find('li.' + item).toggle();
};

可能是一个解决方案......

显示和隐藏容器内的元素

2 个答案: