javascript - 将 Javascript 函数合二为一

Question

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

所以在我的代码中，我只是复制/粘贴代码并更改 id：thumbnail1，primary1

这是一个带有 jquery-3.4.1 的 boostrap 4 页面链接到页面：https ://tools.apotamiefsi.info/service.html#_

我目前正在研究一些 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>

jQuery：

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

不相关的灯箱代码

jQuery：

            $('.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'));
});

标签： javascriptjquery

Answer 1

您的代码/注释表示单个“主要”图像，其中包含多个“拇指”，这些“拇指”会根据data-big每个拇指上的属性更新该图像。

在“.click”事件中，您可以使用this来引用被点击的拇指，这会为您提供新的图像 url。

为每个拇指提供相同的类thumb并使用this意味着您可以编写一个单击处理程序。

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

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

$(".thumb").click(function() {
    var newcontent = $(this).data("big");
    $(".primary").text(newcontent);
    $(".thumb.selected").removeClass("selected");
    $(this).addClass("selected");
})

.thumb { float:left; border: 1px solid #CCC; height:30px; cursor:pointer; }
.primary { clear:both; border: 1px solid blue; height: 60px; }
.selected { border: 1px solid green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='thumb' data-big='THUMB1'>thumb1</div>
<div class='thumb' data-big='THUMB2'>thumb2</div>
<div class='thumb' data-big='THUMB3'>thumb3</div>
<div class='thumb' data-big='THUMB4'>thumb4</div>
<div class='primary'>
  PRIMARY
</div>