在表单元素中链接 jquery

Question

我正在尝试根据下拉菜单中的选定选项更改图像及其链接。我对 jQuery 很陌生，但是已经阅读和观看了很多视频。我的困惑是有多种方法可以完成同一件事，我不确定我是否使用最新的代码。

我目前有：

<select onchange="$('.imageToSwap').attr('src', this.options[this.selectedIndex].value) .$('.linkToSwap').attr('href', this.options[this.selectedIndex].value);" ">

但它似乎不起作用。 图像完美改变！但是链接没有改变！该链接与图像链接相同。 任何帮助将不胜感激。 谢谢

---

以上已排序-谢谢

---

新问题！

好的，我已经在下一个问题上工作了几个小时，但无济于事。我正在学习 - 这很好！

这是我的问题。我正在为 jQuery 使用 Image Zoom + Thumbnails 插件。 有一个标识为 img#zoom-primary 的主图像，在其下方有缩略图（单击它们会更改主图像），这些可以由类 .imageToSwap 标识

我有一个特定产品的选项下拉列表（以表格形式），我想根据所选选项（例如颜色）更改主图像和相应的缩略图。这样，产品图片就会随着颜色选项的变化而变化。

每个选项有 8 张图片。因此，我想更改图像 src 和 href 每次将图像编号增加 1。 EG image-1.png、image-2.png 等

这是我想出的功能——在一些帮助下（谢谢）！

var currentImageTS = 1;
function updateImageTS() {

$('img#zoom-primary').attr('src', this.options[this.selectedIndex].value + "0.png");


$(".imageToSwap").each (function(index, element) {
    $(element).attr('src', this.options[this.selectedIndex].value + currentImageTS + ".png")
    .attr('http', this.options[this.selectedIndex].value + currentImageTS + ".png");

    currentImageTS++;
    if (currentImageTS > 8) currentImageTS = 1;



})

}

本质上，当用户从下拉菜单中选择某些内容时，主图像需要更改，所有缩略图也需要更改。主图只有一个img src，而缩略图有一个img src和一个href

上述代码已包含在一个外部 javascript 文件中 - 该文件正在运行各种其他 javascript，因此它被包含并工作。

在我的表单中，我有以下代码来调用该函数：

<select onchange="$(updateImageTS())" />

但它似乎不起作用！

任何关于我哪里出错以及我应该尝试什么的帮助将不胜感激。

谢谢

Answer 1

试试：

<select onchange="$('.imageToSwap').attr('src',this.options[this.selectedIndex].value).attr('http',this.options[this.selectedIndex].value);" ">

链接 jQuery 时，不要重复 $(...)，因为 jQuery 对象上的任何方法都返回相同的 jQuery 对象。

UPDATE - OP 的第二个问题

我强烈建议在 <script></script> 块中定义一个单独的函数。然后您可以使用变量跟踪当前迭代：

var current = 1;
function update() {

    $('.imageToSwap').attr('src', this.options[this.selectedIndex].value + current + ".png")
    .attr('http', this.options[this.selectedIndex].value + current + ".png");

    current++;
    if (current > 4) current = 1;


}