jquery - 在表单元素中链接 jquery

Question

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

我目前有:

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

但它似乎不起作用。图像完全改变!但链接没有改变!该链接与图像链接相同。任何帮助将非常感激。谢谢

<小时/>

以上已排序 - 谢谢

<小时/>

新问题!

好吧，我已经研究了下一个问题几个小时，但没有成功。我正在学习 - 所以这很好!

这是我的问题。我正在使用 jQuery 的图像缩放 + 缩略图插件。有一个主图像标识为 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和一个a 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 对象。

更新 - 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;


}