Zmiana atrybut href

Question

W trzeba zmienić część tej href:

<a href="media/xxxxx-yyy.jpg">large pic</a> 

Mam kilka projektów, a niektóre kolory, xxxxx oznacza designnumber i yyy dla colornumber, gdy jeden z projektów kliknięcie lub jednego kolorów href powinien zmiana według wartości:

<a href="#">design1</a> 
<a href="#">design2</a> 
<a href="#">design3</a> 

<a href="#">color1</a> 
<a href="#">color2</a> 
<a href="#">color3</a> 

Czy istnieje jakiś sposób, aby to zrobić z JQuery?

Answer 1

Twój link zmienna będzie:

<a id="colorLink" href="media/xxxxx-yyy.jpg">large pic</a> 

Twoje linki przełączanie będzie wyglądać następująco:

<a href="#" onclick="designNumber='0001'; UpdateActionLink();">design1</a> 
<a href="#" onclick="designNumber='0002'; UpdateActionLink();">design2</a> 

<a href="#" onclick="colorNumber='001'; UpdateActionLink();">color1</a> 
<a href="#" onclick="colorNumber='002'; UpdateActionLink();">color2</a> 

JavaScript będzie wyglądać następująco:

var designNumber = ""; 
var colorNumber = ""; 

function UpdateActionLink() { 
    $("#colorlink").attr("href", "media/" + designNumber + "-" + colorNumber + ".jpg"); 
} 

prawdopodobnie będziesz chcesz dodać pewne sprawdzanie poprawności do zdarzenia colorLink tags onclick, aby sprawdzić, czy designNumb er i colorNumber mają poprawne wartości, a jeśli nie, anuluj wydarzenie i daj człowiekowi komunikat, że muszą wybrać poprawny projekt i kolor. Lepiej byłoby zrobić przycisk Pobierz projekt, wyłączył się, aby uruchomić, i w aktualizacji UpdateActionLink sprawdzić, czy wartości są prawidłowe, a jeśli tak, włączyć przycisk Pobierz projekt.

Answer 2

Dodaj klasę do linków, powiedzmy myClass i identyfikator na głównym linku, powiedzmy MyLink i coś jak to powinno działać:

$('.myClass').each(function(el) { 
    el.bind('click', function(event) { 
     $('myLink')attr('href', el.text()); 
    } 
}); 

Answer 3

Można użyć metody w ciekawy czytać i zmodyfikuj href.

html:

<a id="LargePic" href="media/xxxxx-yyy.jpg">large pic</a> 

<a class="design" href="#">design1</a> 
<a class="design" href="#">design2</a> 
<a class="design" href="#">design3</a> 

<a class="color" href="#">color1</a> 
<a class="color" href="#">color2</a> 
<a class="color" href="#">color3</a> 

javascript:

$(".design").click(function() { 
    var old = $("#LargePic").attr("href"); 
    var pos = old.indexOf('-'); 
    val color = old.substr(pos, 3); 
    $("#LargePic").attr("href", "media/" + $(this).text() + "-" + color + ".jpg"); 
}); 

Przetwarzanie starą wartość nie jest kuloodporne. Można tego uniknąć, tworząc dwie zmienne do przechowywania projektu i koloru.

Answer 4

Aby zminimalizować liczbę zapytań DOM, można zapisać bieżący kolor i wzór w obiekcie;

function DesignSwitcher() { 
    var params = $("#largePic").attr("id").split["-"], 
     des = params[0], 
     col = params[1]; 
    $(".design").click(function() { 
     des = this.innerHTML; 
     $("#largePic").attr("href", "media/" + des + "-" + col + ".jpg"); 
    }); 
    $(".color").click(function() { 
     col = this.innerHTML; 
     $("#largePic").attr("href", "media/" + des + "-" + col + ".jpg"); 
    }); 

} 

new DesignSwitcher();