Question

我试图创建一条徽标，当选择一个徽标时，会显示该客户的报价。选择徽标后，应该转到条带的左侧并留在那里。我明白了。

我的问题是让徽标永远存在。

由于徽标的div位于其容器之外，我试图将其删除，然后在条带的另一侧重新创建它们，以便徽标可以继续进行。但是，它工作得不好。

这是html：

<div class="logo-strip">
                <div id="logo-1" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-2" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-3" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-4" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-5" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-6" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-7" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-8" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
            </div>

这是CSS：

 div.logo-strip {
 display: flex;
 height: 70px;
 width: 100%;
 overflow: hidden; }

div.logo-strip div.logo {
  display: flex;
  min-width: 112.5px;
  padding: 5px;
  cursor: pointer;
  opacity: .4;
  transition: .5s; }

    div.logo-strip div.logo img {
    object-fit: contain; }

  div.logo-strip div.selected-logo {
  opacity: 1; }

现在这是我的js：

( function( $ ) {


$('div#quote-1').removeClass('hidden');
$('div#quote-1').animate({'opacity' : '1'}, 500);
$('div#logo-1').addClass('selected-logo');

$('div.logo').click(function() {

    $('div.logo').removeClass('selected-logo');
    $(this).addClass('selected-logo');

    var logo_offset = $(this).offset().left - $('div.logo').first().offset().left;
    var negative_offset = logo_offset * -1;

    var strip_offset = $('div.logo-strip').offset().left - $('div.logo').first().offset().left;

    if (strip_offset >  100) {

        var to_be_cloned = $('div.logo').slice(0, 3);
        to_be_cloned.remove();
        $('div.logo').last().after(to_be_cloned);

    }

    console.log(strip_offset);
    console.log(to_be_cloned);

    $('div.logo').css({'transform' : 'translateX(' + negative_offset + 'px)'});

    var logo_id = $(this).attr('id');
    var logo_id_trimmed = logo_id.substr(5);

    $('div.customer-quote').addClass('hidden');
    $('div.customer-quote').css({'opacity' : '0'});
    $('div#quote-' + logo_id_trimmed).removeClass('hidden');
    $('div#quote-' + logo_id_trimmed).animate({'opacity' : '1'}, 500);
});

} )( jQuery );

基本上我一直在尝试制作它，以便在第一个徽标与div.logo-strip容器元素相距一定距离后，它会移除该徽标div并在徽标divs的结尾。它有点工作，但它是很好的地狱。有谁知道怎么做？

Answer 1

我明白了。

首先，一切都在扼杀，因为我正在删除集合一端的div并将它们放在另一端，导致一切都转移。我需要做的是克隆div并将它们放在最后，所以我只是在最后添加div，而不是从头开始删除它们。

其次，我需要获取先前选择的div和新选择的div的索引，并使用它们来创建切片编号。

第三，你需要通过测量新选择的div的偏移量减去第一个div的偏移量来移动整个div链。

第四，你需要从结尾区域之外的额外div开始。如果你没有，那么它在开始时就会变得怪异。

这是新的JS：

$('div.logo').click(function() {
    var previously_selected = $('div.selected-logo');
    var newly_selected = $(this);
    var number_of_previous_selection = $('div.logo').index(previously_selected);
    var number_of_new_selection = $('div.logo').index(newly_selected);
    var selection_distance = number_of_previous_selection - number_of_new_selection;

    $('div.logo').removeClass('selected-logo');
    $(this).addClass('selected-logo');

    var logo_offset = $(this).offset().left - $('div.logo').first().offset().left;
    var negative_offset = logo_offset * -1;
    var strip_offset = $('div.logo-strip').offset().left - $('div.logo').first().offset().left;

    var to_be_cloned = $('div.logo').slice(number_of_previous_selection, number_of_new_selection).clone(true);
    $('div.logo-strip').append(to_be_cloned);
    $('div.logo').css({'transform' : 'translateX(' + negative_offset + 'px)'});

    console.log(number_of_new_selection);
    console.log(number_of_previous_selection);
    console.log(negative_offset);

    var logo_id = $(this).attr('id');
    var logo_id_trimmed = logo_id.substr(5);

    $('div.customer-quote').addClass('hidden');
    $('div.customer-quote').css({'opacity' : '0'});
    $('div#quote-' + logo_id_trimmed).removeClass('hidden');
    $('div#quote-' + logo_id_trimmed).animate({'opacity' : '1'}, 500);


});

然后是HTML：

<div class="quote-and-title">
                <div class="customer-quote hidden" id="quote-1">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-2">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-3">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-4">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-5">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-6">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-7">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-8">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-9">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-10">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-11">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-12">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="title has-red-divider-uptop">
                    <p>What The Industry is Saying</p>
                </div>
            </div>

            <div class="logo-strip">

                <div id="logo-1" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-2" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-3" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-4" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-5" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-6" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-7" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-8" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-9" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-10" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-11" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-12" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>

            </div>

在容器div中无限水平滚动div组

1 个答案: