Thay đổi thuộc tính href

Question

Trong cần phải thay đổi một phần của href này:

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

Tôi có một số thiết kế, và một số màu sắc, xxxxx là viết tắt của designnumber và yyy cho colornumber, khi một trong những thiết kế được nhấp hoặc một màu sắc của các href nên thay đổi theo giá trị:

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

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

Có cách nào để làm điều này với JQuery không?

Answer 1

liên kết biến của bạn sẽ là:

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

liên kết toggling của bạn sẽ trông như thế này:

<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 của bạn sẽ trông như thế này:

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

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

Bạn sẽ có thể muốn thêm một số xác nhận vào thẻ colorLink onclick sự kiện để kiểm tra để đảm bảo designNumb er và colorNumber có giá trị hợp lệ, và nếu không, hãy hủy bỏ sự kiện và cung cấp cho người một tin nhắn nói rằng họ cần chọn một thiết kế và màu sắc hợp lệ. Tốt hơn có thể là để làm cho một nút Get Design, đã vô hiệu hóa để bắt đầu, và trong UpdateActionLink kiểm tra để xem nếu các giá trị hợp lệ và nếu như vậy kích hoạt nút Get Design.

Answer 2

Thêm một lớp học để liên kết của bạn, chúng ta hãy nói myClass, và một ID vào liên kết chính, chúng ta hãy nói MyLink, và một cái gì đó như thế này nên làm việc:

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

Answer 3

Bạn có thể sử dụng phương pháp attr để đọc và sửa đổi 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"); 
}); 

Phân tích giá trị cũ không phải là chống đạn. Bạn có thể tránh điều này bằng cách tạo hai biến để giữ thiết kế và màu sắc.

Answer 4

Để giảm thiểu số lượng truy vấn DOM bạn thực hiện, bạn có thể lưu trữ màu và thiết kế hiện tại trong một đối tượng;

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