0

我对 JQuery 相当陌生。单击以更改包含占位符的图像以将图像替换为新图像时，我已经能够获得颜色链接。我遇到的问题是，当您单击红木颜色等颜色链接时，顶部的地址栏应显示网页以及单击的颜色参数并保持红木颜色。单击红木图像时地址栏的外观示例：

    ".../wb/JourneymenSelect.htm?color=redwood"

还有一个按钮，上面写着“电子邮件”，应该能够从地址栏中获取链接，当您单击该链接时，应该显示正确的颜色选择。e.preventDefault(); 如果我删除它，则行，除了单击颜色链接时，您会看到新图像的快速闪烁，但不会保留新图像信息。以下是我正在使用 HTML 部分的代码的主要部分：

   <div style="text-align: center;" id="houseImage">
            <img src="images/houses/JourneymenSelect/charcoal_gray.jpg" width="320" height="206" class="houseimage" alt="" /></div>
        <div id="colorbuttons" style="width: 300px; margin: 0px auto; margin-top: 10px; padding-left: 20px;
            text-align: center; font-style: italic;">
            <span>Click swatches below to change panel color on house</span><br />
            <br />
            COLORSCAPES® DARK COLOR<br />
            <a href="JourneymenSelect.htm?color=charcoal_gray"" class="myButton" style="background-image: url(images/buttons/charcoal_gray.png)!important;">&nbsp;</a>
            <a href="JourneymenSelect.htm?color=redwood" class="myButton" style="background-image: url(images/buttons/redwood.png)!important;">&nbsp;</a><br />
            <a href="JourneymenSelect.htm?color=natural_cedar" class="myButton" style="background-image: url(images/buttons/natural_cedar.png)!important;">&nbsp;</a>
            <a href="JourneymenSelect.htm?color=heritage_blue" class="myButton" style="background-image: url(images/buttons/heritage_blue.png)!important;">&nbsp;</a>
            <a href="JourneymenSelect.htm?color=shamrock" class="myButton" style="background-image: url(images/buttons/shamrock.png)!important;">&nbsp;</a><br />
            <br />

jQuery代码：

    $('#colorbuttons a').click(function (e) {
    e.preventDefault();
    // get the link and its 'href' attribute...
    var linkImage = $(this);
    var link = linkImage.attr('href');
    var extension = '.jpg';
    //alert(link);

    // split the 'href' attribute with the '=' character and get the
    // last element in the array...
    link = link.split('=');
    //alert(link);
    var filename = link[link.length - 1] + extension;
    //alert(filename);

    // now we can create the image we're going to put in the
    // Replace image container...
    var image_folder = 'images/houses/';
    //alert(image_folder + filename);

    //Get the folder name of where image will be coming from
    //This will help when there are muliple pages with different folder locations
    var folderPath = $('.houseimage').attr('src');
    folderPath = folderPath.split('/');
    var folderName = folderPath[folderPath.length - 2] + '/';
   // alert(folderName);

    var replace_image = $('<img class="houseimage" width="320" height="206" alt="" />');
    replace_image.attr('src', image_folder + folderName + filename);
   //alert(replace_image.attr('src'));


    // set the HTML of the container to the new image...
    // first, clear out whatever HTML was in there, then add
    // the new image...
    $('.houseimage').html('');
    // alert($('.houseimage').html() + 'this is empty string');
    $('.houseimage').replaceWith(replace_image);

});

我只使用一个页面，因为可能还有其他相关页面，并试图使其易于管理。你能帮忙的话，我会很高兴。

4

2 回答 2

0

我终于弄明白了。必须删除此标语行中的内容

    var newImage = $('<img class="houseimage" width="320" height="206" alt="" />');

然后我必须回忆图像的所有属性，以便正确显示。在替换图像行后，我使用了以下脚本。

    $('#houseImage img').addClass('houseimage');
    $('.houseimage').attr('width', '300');
    $('.houseimage').attr('height', '186');
    $('.houseimage').attr('alt', '');

它现在适用于所有浏览器。唯一不重要的是 IE 在加载图像时会闪烁。

于 2012-08-10T12:56:17.867 回答
0

我修复了部分解决方案。我决定尝试加载事件，而不是使用点击事件。它包含一个检查 URL 的 if 语句，如果它包含某种颜色，则显示图像。下面是我想出的，似乎有效。

     $(window).load(function () {
    var url = document.URL;
    var colorName = url.substring(url.lastIndexOf("=") + 1);

    var folderPath = $('.houseimage').attr('src');
    folderPath = folderPath.split('/');
    var folderName = folderPath[folderPath.length - 2] + '/';
    var extension = '.jpg';
    var newImage = $('<img class="houseimage" width="320" height="206" alt="" />');
    newImage.attr('src', 'images/houses/' + folderName + colorName + extension);
    //alert(newImage);

    if (url.indexOf(colorName)) {
        //alert(url + ' indexof ' + colorName);
        $('.houseimage').html('');
        $('.houseimage').replaceWith(newImage);
    }
    else {
        // show default.
        $('.houseimage').attr('src', 'images/houses/' + folderName + '/charcoal_gray.jpg');

    }


});

现在的问题是它现在在 Firefox、android 手机和 iphone 中运行良好。但对于 IE7、8、9，它根本不起作用。使用我的窗口 load() 脚本。URL 会更改，但图像不会更改。

于 2012-08-08T19:46:42.240 回答