Umleiten zu Seite und übergeben text-und Bild-parameter - HTML-JS

Habe ich eine Produkt-Seite mit 20 oder so Produkte auf Sie. Wenn Sie klicken Sie auf einen Produkt-link, den ich gerne weitergeben möchte 2 Parameter, um die Seite leitet weiter auf, ein Bild " src " und ein text-Attribut, und zeigt dann diese in divs.

ATM mein code setzt den Titel und img data-Attribut , leitet auf die richtige Seite mit den Parametern in den URL-string, aber ich bin mir nicht sicher, wie Sie Sie zur Anzeige dieser Informationen ist richtig.

Wie kann ich pass ein Titel und img-Attribut parameter der lineup/index.html Seite, und zeigt dann diese 2 Attribute? Auch gibt es einen besseren Weg, dies zu tun, als mit den Parametern in der URL-query-string?

Produkt-link

<a href="#" class="product" data-img="product1-img.jpg" data-title="Product1">More Information</a>

products.js

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        var name;
        name = $(this).data('title');
        window.location = './lineup/index.html?title=' + name + 'img' + img;
    });
});

lineup/index.html

<div class="text_area">
    <div id="title-area">TITLE ATTRIBUTE</div>
    <div class="product-img">
      IMG SRC
    </div>
</div>

Wenn jemand braucht mehr code, einfach Schreien, ich bin mit nur einfachen HTML -, javascript-und jQuery.

InformationsquelleAutor dodgerogers747 | 2013-10-09
  1. 1

    Passieren beide Parameter, können Sie versuchen, diese

    jQuery(document).ready(function($){
    $('.product').click(function(event) {
        event.preventDefault();
        var name = $(this).data('title'), img = $(this).data('img')
        window.location = './lineup/index.html?title=' + name + '&img=' + img;
    });
});

    Parsen einen Wert von key aus url Sie können diese Funktion nutzen (Quelle : MDN)

    function loadPageVar (sVar) {
    return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

    In Ihrem lineup/index.html diesen code und die Funktion, die oben gegeben

    $(function(){
    $('#title-area').text(loadPageVar('title'));
    $('.product-img').text(loadPageVar('img')); //will set text

    //To set an image with the src
    $('.product-img').append($('<img/>', {
        'src':loadPageVar('img')
    }));
});
    • das ist großartig-vielen Dank! Perfekt.
    • Sie sind herzlich willkommen 🙂
    InformationsquelleAutor The Alpha
  2. 1

    Wenn Sie auf der Suche nach einer alternative zu URL-query-strings würde ich schauen in Fenster.sessionStorage Objekt.

    Store Parameter, z.B. so:

    $('.product').click(function(event) {
    event.preventDefault();
    window.sessionStorage.setItem('name', $(this).data('title'));
    window.sessionStorage.setItem('imgSrc', $(this).data('img'));
    window.location.reload(); //refreshes the page
});

    Dann zum laden der Attribute, sollten Sie existieren, fügen Sie die folgenden:

    $(function(){
    if (window.sessionStorage.length){
        $('#title-area').text(window.sessionStorage.getItem('title'));

        $('.product-img').append($('<img/>', {
            'src':window.sessionStorage.getItem('imgSrc')
        }));
    }

    //include the click event listener for .product link here too
});
    InformationsquelleAutor Suvi Vignarajah
Schreibe einen Kommentar