我对JQuery相当新。单击时我可以获取颜色链接以更改包含占位符的图像以用新图像替换图像。我遇到的问题是当你点击红木颜色的颜色链接时,顶部的地址栏应该显示网页加上点击的颜色参数并保持红木颜色。 单击红木图像时地址栏应如何显示的示例:
".../wb/JourneymenSelect.htm?color=redwood"
此外,还会有一个显示“电子邮件”的按钮,该按钮应该能够从地址栏中获取链接,当您单击该链接时,应显示正确的颜色选择。 e.preventDefault();如果我删除它的行,除了单击时颜色链接时,您会看到新图像的快速闪烁,但不保留新的图像信息。以下是我使用HTML Part:
的代码的主要部分 <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;"> </a>
<a href="JourneymenSelect.htm?color=redwood" class="myButton" style="background-image: url(images/buttons/redwood.png)!important;"> </a><br />
<a href="JourneymenSelect.htm?color=natural_cedar" class="myButton" style="background-image: url(images/buttons/natural_cedar.png)!important;"> </a>
<a href="JourneymenSelect.htm?color=heritage_blue" class="myButton" style="background-image: url(images/buttons/heritage_blue.png)!important;"> </a>
<a href="JourneymenSelect.htm?color=shamrock" class="myButton" style="background-image: url(images/buttons/shamrock.png)!important;"> </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);
});
我只使用一个页面,因为可能有其他相关页面并试图保持简单和易于管理。你能帮忙的话,我会很高兴。
答案 0 :(得分:0)
我修复了部分解决方案。我决定尝试加载事件,而不是使用click事件。它包含一个检查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()脚本。网址会更改,但不会更改图片。
答案 1 :(得分: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加载时闪烁图像。