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

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>

Answer 2

<div class="row justify-content-center">
    <div class="container thumbnails" style="display:contents;">
        <a class="selected thumbnail thumbnail2 main-thumb" data-ref="#img21"
             data-big="/images/products/wringers/wringer_730/Wringer.jpg" style="padding: 6px;">
            <div class="thumbnail-image"
                     style="background-image: url('https://www.edustoke.com/images/login-image.png')"></div>
        </a>
        <a class="thumbnail2 main-thumb" data-ref="#img22" data-big="/images/products/wringers/wringer_730/Wringer2.jpg"
             style="padding: 6px;">
            <div class="thumbnail-image"
                     style="background-image: url('https://www.edustoke.com/images/login-image.png')"></div>
        </a>
        <a class="thumbnail2 main-thumb" data-ref="#img23"
             data-big="/images/products/wringers/wringer_730/WringerSteady.jpg" style="padding: 6px;">
            <div class="thumbnail-image"
                     style="background-image: url('https://www.edustoke.com/images/login-image.png')"></div>
        </a>
    </div>
</div>

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

将Javascript函数合并为一个

2 个答案: