Question

$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

$('button').on('click', function(){
$('.act').insertAfter($('.act').next());
});

.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}

.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}

.act{
background:skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
</div>
<br>
<button>CLICK</button>

单击第一个框将其激活。

然后单击按钮将其向右移动。

您会看到对齐丢失，即各框之间没有空格。

如何防止这种情况？

Answer 1

与其使用insertAfterafter来改变justify样式，还不如使用$('.box').on('click', function(){ $('.act').removeClass('act'); $(this).addClass('act'); }); $('button').on('click', function(){ div1 = $('.act'); div2 = $('.act').next(); tdiv1 = div1.clone(); tdiv2 = div2.clone(); if(!div2.is(':empty')){ div1.replaceWith(tdiv2); div2.replaceWith(tdiv1); $('.box').on('click', function(){ $('.act').removeClass('act'); $(this).addClass('act'); }); } // $('.act').insertAfter($('.act').next()); });，只需在div之间切换位置即可。

.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}

.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}

.act{
background:skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
<br>
<button>CLICK</button>

@SpringBootApplication
@EntityScan(".....")
public class Application extends SpringBootServletInitializer implements WebMvcConfigurer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Application.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public RestTemplate restTemplate() {
    RestTemplate restTemplate = new RestTemplate();

    List<ClientHttpRequestInterceptor> interceptors = restTemplate.getInterceptors();

    // check if restTeamplate doesn't already have other interceptors
    if (CollectionUtils.isEmpty(interceptors)) { 
        interceptors = new ArrayList<>();
    }

    interceptors.add(new RestTemplateHeaderModifierInterceptor());
    restTemplate.setInterceptors(interceptors);
    return restTemplate;
}

@Bean
public WebMvcConfigurer webMvcConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
            registry.addInterceptor(new RestTemplateHeaderModifierInterceptor());
        }
    };
} 
}

Answer 2

我建议采用与先前答案相同的方式，即通过在元素之间进行克隆和切换。但是在上。只需单击几下，答案元素就会消失。

我已经处理了.next()不可用时的情况，因此使兄弟姐妹元素循环了。

$('.box').on('click', function (){
  $('.act').removeClass('act');
  $(this).addClass('act');
});

$('button').on('click', function (){ 
  if($('.act').length > 0)
  {
    activeBox = $('.act');
    nextBox = $('.act').next('.box').length > 0 ? $('.act').next('.box') : $('.box').eq(0);

    cloneActiveBox = activeBox.clone();
    cloneNextBox = nextBox.clone(); 

    activeBox.replaceWith(cloneNextBox);
    nextBox.replaceWith(cloneActiveBox); 

    $('.box').on('click', function (){
      $('.act').removeClass('act');
      $(this).addClass('act');
    });    
  } 
});

链接到工作的小提琴：http://jsfiddle.net/43psy50b/2/

如何在移动元素时保持对齐

2 个答案: