更改href属性

Question

需要更改此href的一部分：

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

我有一些设计和颜色，xxxxx代表设计编号，yyy代表颜色编号，当其中一个设计或颜色被点击时，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的方法来实现这个？

- ferrucio

---

这些答案中有任何一个有帮助吗？ - Patrick Karcher

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事件中添加一些验证，以检查designNumber和colorNumber是否具有有效值，如果没有，则取消事件并向用户发送消息，告诉他们需要选择有效的设计和颜色。更好的方法可能是创建一个“获取设计”按钮，一开始处于禁用状态，在UpdateActionLink中检查值是否有效，如果有效则启用“获取设计”按钮。

- Patrick Karcher

Answer 2

你可以使用 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");
});

解析旧值并不是百分之百可靠的。你可以通过创建两个变量来保存设计和颜色来避免这种情况。

- kgiannakakis

Answer 3

为了最小化 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();

- wheresrhys

Answer 4

给你的链接添加一个类，比如myClass，在主链接上添加一个ID，比如myLink，然后像这样做应该可以实现：

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

- Serty Oan