jQuery：更改div ID不起作用

Question

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

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

1. 点击'左'
2. 左边的div前进了。
3. 中心divs ID被称为'left'，反之亦然，（使用临时ID来阻止两个具有相同ID的div）
4. css被重置，好像它从未发生过，除了图像不同。

我的问题是他们似乎完全重置到原来的状态，好像身份改变从未发生过，任何想法？

这是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"});