将Javascript函数组合成一个函数

我想将以下javascript组合成一个函数。我相信这可以通过一系列的id来完成，而不是我所做的。当然欢迎提出建议

因此，在我的代码中，我只需复制/粘贴代码并更改ID： 拇指钉1，初级1

这是一个boostrap 4页面，带有jquery-3.4.1链接到以下页面：

我目前正在学习一些js，但我在这方面还是新手。对不起，我可能犯了任何错误，这是我的第一个问题，尽管我已经读了1000个答案：P 如果我知道如何使用vars，我不会问：）正如我所说，我对js一无所知

HTML:

<a id="linkwed2" href="#img1" style="display: contents;"><main href="#img21" class="primary primary2" style="background-image: url(/images/products/wringers/wringer_730/Wringer.jpg)"></main></a>
<div class="row justify-content-center">
    <div class="container thumbnails" style="display:contents;">
        <a class="selected thumbnail thumbnail2" data-ref="#img21" data-big="/images/products/wringers/wringer_730/Wringer.jpg" style="padding: 6px;">
            <div class="thumbnail-image" style="background-image: url(/images/products/wringers/wringers_thumbs/wringer_730/Wringer.jpg)"></div>
        </a>
        <a class="thumbnail2" data-ref="#img22" data-big="/images/products/wringers/wringer_730/Wringer2.jpg" style="padding: 6px;">
            <div class="thumbnail-image" style="background-image: url(images/products/wringers/wringers_thumbs/wringer_730/Wringer2.jpg)"></div>
        </a>
        <a class="thumbnail2" data-ref="#img23" data-big="/images/products/wringers/wringer_730/WringerSteady.jpg" style="padding: 6px;">
            <div class="thumbnail-image" style="background-image: url(/images/products/wringers/wringers_thumbs/wringer_730/WringerSteady.jpg)"></div>
        </a>
    </div>
</div>

            $('.thumbnail1').on('click', function() {
  var clicked = $(this);
  var neaSelection = clicked.data('ref');
  linkwed.href = (neaSelection);
});

        $('.thumbnail2').on('click', function() {
  var clicked = $(this);
  var neaSelection2 = clicked.data('ref');
  linkwed2.href = (neaSelection2);
});

不相关的灯箱代码

jquery:

<a id="linkwed2" href="#img1" style="display: contents;"><main href="#img21" class="primary primary2" style="background-image: url(/images/products/wringers/wringer_730/Wringer.jpg)"></main></a>
<div class="row justify-content-center">
    <div class="container thumbnails" style="display:contents;">
        <a class="selected thumbnail thumbnail2" data-ref="#img21" data-big="/images/products/wringers/wringer_730/Wringer.jpg" style="padding: 6px;">
            <div class="thumbnail-image" style="background-image: url(/images/products/wringers/wringers_thumbs/wringer_730/Wringer.jpg)"></div>
        </a>
        <a class="thumbnail2" data-ref="#img22" data-big="/images/products/wringers/wringer_730/Wringer2.jpg" style="padding: 6px;">
            <div class="thumbnail-image" style="background-image: url(images/products/wringers/wringers_thumbs/wringer_730/Wringer2.jpg)"></div>
        </a>
        <a class="thumbnail2" data-ref="#img23" data-big="/images/products/wringers/wringer_730/WringerSteady.jpg" style="padding: 6px;">
            <div class="thumbnail-image" style="background-image: url(/images/products/wringers/wringers_thumbs/wringer_730/WringerSteady.jpg)"></div>
        </a>
    </div>
</div>

            $('.thumbnail1').on('click', function() {
  var clicked = $(this);
  var neaSelection = clicked.data('ref');
  linkwed.href = (neaSelection);
});

        $('.thumbnail2').on('click', function() {
  var clicked = $(this);
  var neaSelection2 = clicked.data('ref');
  linkwed2.href = (neaSelection2);
});

以此类推，我一页上有7个

我预计结果如下： 与单击的对象匹配的ID数组 图像，然后是上面的代码，没有其他选项：

$('.ARRAY_ITEM').on('click', function() {
    var clicked = $(this);
    var newSelection = clicked.data('big');
    var $img = $('.ARRAY2_ITEM').css("background-image","url(" + newSelection + ") ");
    clicked.parent().find('.ARRAY_ITEM').removeClass('selected');
    clicked.addClass('selected');
    $('.ARRAY2_ITEM').empty().append($img.hide().fadeIn('slow'));
});

---

您的代码/注释表示一个“主”图像，该图像具有多个“拇指”，可根据每个拇指上的

data big

属性更新该图像

在“.click”事件中，您可以使用

this

引用单击的拇指，这将为您提供新的图像url

给每个thumb赋予相同的类

thumb

，并使用

this

意味着您可以编写一个单击处理程序

下面是一个以可演示的形式使用文本（来自数据-与url相同）的示例，显示了所有概念。您需要进行一些调整，例如将主img src=设置为新url，但概念是相同的

我还添加了一个简单的方法来显示选择了哪个项目，因为这也是原始代码的一部分

$（“.thumb”）。单击（函数（）{
var newcontent=$（this.data（“大”）；
$（“.primary”）.text（新内容）；
$（.thumb.selected”）.removeClass（“selected”）；
$（此）.addClass（“选定”）；
})

.thumb{float:左；边框：1px实心#CCC；高度：30px；光标：指针；}
.primary{清除：两个；边框：1px纯蓝色；高度：60px；}
.所选{边框：1px纯绿色；}

拇指1
拇指2
拇指3
拇指4
主要的，重要的

关于。。。使用变量？与其给每个元素一个唯一的类，不如让它们使用同一个类，这样就可以了。如果你提供你的HTML，我们可以更好地帮助你。什么是HTML？可能甚至不需要一个循环以及（一些）HTML，您能描述一下您正在尝试做什么吗？看起来，单击一个缩略图就可以在匹配的“主”中显示较大的图像。但它似乎是1-1（thumb->primary），而不是many-1（每个thumb指向同一个primary）。所以“选择”类似乎没有任何好处。如果我知道如何使用VAR，我不会问：）好心！如果我使用同一个类，库不会分开。。我将添加一个链接到页面以及我添加的HTML代码。这是一个简单的图库，用拇指旋转我还没有测试过的主图像，但如果有一个图库的话，这似乎是可行的。你能告诉我这是在一个页面上运行4个不同库的代码吗？检查链接：）我将测试此代码您可以添加给每个

.primary

一个单独的类，并添加为

数据primary

属性以将拇指链接到primary。然后，唯一的更改是

$（“+$（this）.data（“primary”））.text（newContent）

或者，我的偏好是，但这取决于您的拇指/primary在页面上的位置。您可以将每个拇指+primary包装在一个包装div中，并使用

$（this）。最接近的（.wrapper”）。查找（.primary”）

（在您的情况下，可能只是

.row

）请不要参考第三方网站（“检查链接”），因为它们会随着时间的推移而改变，使问题和答案变得无用。请检查提供的页面链接。提供的代码按预期工作。我想减少函数的数量。∑τάθηςΔρακίΔης这是他提供的，通过添加一个公共类，您可以将函数应用于所有元素。。。

$('.main-thumb').on('click', function () {
    var clicked = $(this);
    var newSelection = clicked.data('big');
    var $img = clicked.css("background-image", "url(" + newSelection + ") ");
    $(clicked).addClass('selected').siblings().removeClass('selected');
    $(clicked).empty().append($img.hide().fadeIn('slow'));
});