javascript - jQuery:更改 div ID 不起作用

Question

我已经回来了，google-fu 什么也没给我带来。

我正在尝试制作一种图片库，我需要在我的 slider 上动态重置 div，但我没有运气，这是过程:

1. 点击“左”
2. 左边的 div 向前移动。
3. 中央 div ID 被称为“左”，反之亦然(使用临时 ID 来阻止具有相同 ID 的两个 div)
4. CSS 被重置，就好像它从未发生过，除了图像不同。

我的问题是它们似乎完全重置为原始状态，好像 ID 更改从未发生过，有什么想法吗？

这是 JSFiddle

这是有问题的代码:

    $('.navigationLeft').click(function() {
    console.log("yay");
    $( '#left' ).animate({
        marginLeft: selWidth
    }, 500, "linear",  function() {
        // Animation complete.
        $( '#center' ).attr('id', 'temp');
        $( '#left' ).attr('id', 'center');
        $( '#center' ).attr('id', 'left');
        $( '#left' ).css('width', '900px');
        $( '#left' ).css('height', '400px');
        $( '#left' ).css('overflow', 'hidden');
        $( '#left' ).css('position', 'relative');
        $( '#left' ).css('left:', '-900px');
        $( '#left' ).css('overflow', 'hidden');
        $( '#left' ).css('z-index', '2');
        $( '#center' ).css('width', '900');
        $( '#center' ).css('height', '400');
        $( '#center' ).css('position', 'absolute');
        $( '#center' ).css('overflow', 'hidden');
        $( '#center' ).css('z-index', '1');
    });
    //reset positions and change images
});

Answer 1

</img>标签不是有效标签，因为图像没有 结束 标签。此外，jQuery 比您想象的要有趣得多!
我的建议是不要创建 <img>标签，让 JavaScript 为我们做这件事，毕竟我们使用的是图像 URL 数组。
而不是 jQuery 的 .animate() , 使用 CSS transition !

jQuery(function($) {

  const gallery = {
    one: [ // (P.S: In HTML use data-gallery="one")
      'http://placehold.it/900x400/0bf/fff&text=1',
      'http://placehold.it/900x400/f0b/fff&text=2',
      'http://placehold.it/900x400/bf0/fff&text=3',
      'http://placehold.it/900x400/b0f/fff&text=4',
    ], // you can add more name:[] sets for other galleries
  };

  $('[data-gallery]').each(function(i, gal) {
  
    const name = $(gal).data('gallery');
    if (!Object.prototype.hasOwnProperty.call(gallery, name)) return;
    
    const $slides = $(gallery[name].map(url => $('<img>', {src: url})[0]));
    const tot = $slides.length; // Store how many images we have
    let c = 0; // Current slide Counter

    $('.slides', gal).append($slides); // Append created slides
    
    $(".prev, .next", gal).on('click', function() {
      c = ($(this).is('.next') ? ++c : --c) < 0 ? tot - 1 : c % tot;
      $slides.css({
        transform: `translateX(-${c*100}%)`
      })
    });

  });

});

/*QuickReset*/*{margin:0;box-sizing:border-box}html,body{min-height:100%;font:14px/1.4 sans-serif;}

/* Gallery */

[data-gallery] .slides {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 170px;
}

[data-gallery] .slides > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

<div data-gallery="one" class="gallery">
  <div class="slides"></div>
  <button class="prev" type="button">PREV</button>
  <button class="next" type="button">NEXT</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

---

P.S:作为旁注，以下内容

    $( '#left' ).css('width', '900px');
    $( '#left' ).css('height', '400px');
    $( '#left' ).css('overflow', 'hidden');

有点冗长。而是传递一个对象文字 {}喜欢:

    $( '#left' ).css({width:900, height:400, overflow:"hidden"});