Question

我意识到我没有很好地格式化我之前的问题，所以我删除了它并稍微改变了格式。希望这对你们更有帮助。我正在尝试创建一个允许用户创建自己的T恤的网站。 T恤上有一个标志，我允许用户独立改变左眼和右眼的颜色，左眼和右眼的轮廓。嘴巴的颜色及其轮廓以及整个徽标的颜色。以下是代码示例：

HTML：

<button class="accordion"> Logo Colors </button>
    <div class="panel" id="logogallery">
        <img id="SuperPrimrose" src="Markers/LogoMarkers/SuperPrimrose.jpg" alt="SuperPrimrose">
        <img id="SuperLemonYellow" src="Markers/LogoMarkers/SuperLemonYellow.jpg" alt="SuperLemonYellow">
        <img id="Gold8000" src="Markers/LogoMarkers/Gold8000.jpg" alt="Gold8000">
    </div

<button class="accordion"> Left Eye Colors </button>
    <div class="panel" id="LEgallery">
        <img id="LEBearsNavy" src="Markers/LEMarkers/BearsNavy.jpg" alt="BearsNavy" title="BearsNavy">
        <img id="LEBlack" src="Markers/LEMarkers/Black.jpg" alt="Black">
        <img id="LEBlackLightGreen" src="Markers/LEMarkers/BlackLightGreen.jpg" alt="BlackLightGreen" title="Black">
       </div>

<button class="accordion"> Right Eye Colors </button>
    <div class="panel" id="REgallery">
        <img id="REBearsNavy" src="Markers/LogoMarkers/BearsNavy.jpg" alt="BearsNavy" title="BearsNavy">
        <img id="REBlack" src="Markers/LogoMarkers/Black.jpg" alt="Black">
       </div>

CSS：

div#logogallery {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 250px;
}

div#logogallery img {
    width: 25px;
    margin: 2px;
}
div#logofullsize {
    position: absolute;
    width: 500px;
    height: 400px;
    margin: 10px;
    top: 350px;
    right: 750px;
    background-size: contain;

div#LEgallery {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 250px;
}

div#LEgallery img {
    width: 25px;
    margin: 2px;
}
div#LEfullsize {
    position: absolute;
    width: 500px;
    height: 400px;
    margin: 10px;
    top: 350px;
    right: 750px;
    background-size: contain;
}


/*Logo Color Image Style CSS*/

div.SuperPrimrose {
    background: url('Colors/LogoColor/SuperPrimrose.png') no-repeat left top;
}

div.SuperLemonYellow {
    background: url('Colors/LogoColor/SuperLemonYellow.png') no-repeat left top;
}

div.Gold8000 {
    background: url('Colors/LogoColor/Gold8000.png') no-repeat left top;


/*LE Color Image Style CSS*/

div.LESuperPrimrose {
    background: url('Colors/LEColor/SuperPrimrose.png') no-repeat left top;
    }
div.LESuperLemonYellow {
    background: url('Colors/LEColor/SuperLemonYellow.png') no-repeat left top;
    }
div.LEGold8000 {
    background: url('Colors/LEColor/Gold8000.png') no-repeat left top;
    }
div.LESuperDolphinYellow {
    background: url('Colors/LEColor/SuperDolphinYellow.png') no-repeat left top;

JQUERY：

    $(document).ready(function(){
        $("img").click(function(e) {
            var newclass = $(this).attr("id");
            var oldclass = $("#logofullsize").attr('class');
            $("#logofullsize").fadeOut(function() {
                $("#logofullsize").removeClass(oldclass).addClass(newclass).fadeIn('slow');
            })
        })
    });

    $(document).ready(function(){
        $("img").click(function(e) {
            var newclass = $(this).attr("id");
            var oldclass = $("#LEfullsize").attr('class');
            $("#LEfullsize").fadeOut(function() {
                $("#LEfullsize").removeClass(oldclass).addClass(newclass).fadeIn('slow');
            })
        })
    });

设置网站以便您单击下拉列表（例如徽标颜色，LE颜色等）并显示缩略图颜色。单击颜色，页面上的徽标将更改为该特定颜色。我有2个问题。

我无法立即在页面上显示所有元素，这意味着页面上只显示主徽标。但是他们的眼睛，嘴巴和轮廓都没有显示出来。
假设主徽标出现在页面上。我可以点击“徽标”下拉菜单，颜色会出现。我单击一种颜色，徽标将更改为指定的颜色。但是，假设我单击“左眼”下拉并从那里单击一种颜色。它不是改变徽标中眼睛的颜色，而是将徽标换成该颜色的左眼图片。

我怎样才能这样做，所以标识的所有元素“眼睛，嘴巴，轮廓等”一起出现在页面上，当我从左眼，右眼，嘴等处点击标记时，它就会这样做。它不会改变整体形象，只是那个方面？

如何使用jquery交换多个图库中的多个图像

0 个答案: