0

私はJQueryにかなり慣れていません。クリックしてプレースホルダーを含む画像を変更し、画像を新しいものに置き換えると、カラーリンクを取得できました。私が抱えている問題は、レッドウッドの色のようなカラー リンクをクリックすると、上部のアドレス バーに Web ページとクリックされたカラー パラメータが表示され、レッドウッドの色が維持されることです。レッドウッドの画像がクリックされたときのアドレスバーの例:

    ".../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);

});

他の関連ページがあり、簡単で管理しやすいようにしようとしているため、1 つのページのみで作業しています。どんな助けでもいいでしょう。

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 に答える