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事件中添加一些验证以检查以确保designNumber和colorNumber具有有效值，如果没有，则取消该事件并向人发送消息说他们需要选择有效的设计和颜色。更好的方法是创建一个Get Design按钮，禁用启动，然后在UpdateActionLink中检查值是否有效，如果是，则启用Get Design按钮。

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");
});

解析旧值不是防弹。你可以通过创建两个变量来保持设计和颜色来避免这种情况。

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

Answer 4

在链接中添加一个类，比如说myClass，主链接上有一个ID，比方说myLink，这样的东西应该可以工作：

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

更改href属性

4 个答案: