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对象。

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


}

在表单元素中链接jquery

1 个答案: