更改href屬性

Question

在需要改變這個HREF的一部分：

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

我有一些設計，和一些顏色，XXXXX代表designnumber和YYY爲colornumber，當點擊該設計的一個或一個顏色的href應根據價值 變化：

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

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

有沒有辦法使用jQuery做到這一點？

Answer 1

你的變量鏈接是：

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

你撥動鏈接應該是這樣的：

<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是這樣的：

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

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

你可能會想要添加一些驗證到colorLink標記onclick事件來檢查以確保designNumb呃和colorNumber都有有效的值，如果沒有，則取消該事件，並給人一條消息，說他們需要選擇一個有效的設計和顏色。更好的做法可能是創建一個「獲取設計」按鈕，禁用它以啓動，並在UpdateActionLink中檢查值是否有效，如果是，則啓用「獲取設計」按鈕。

Answer 2

類添加到您的鏈接，讓我們說MyClass的，和主鏈路上的ID，讓我們說myLink的，而這樣的事情應該工作：

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

Answer 3

您可以使用attr方法來讀取和修改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"); 
}); 

解析舊值不是防彈。你可以通過創建兩個變量來保存設計和顏色來避免這種情況。

Answer 4

爲了最大限度地減少DOM查詢的數量，您可以將當前顏色和設計存儲在對象中;

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();