我试图制作一个代码，当单击".moveright"按钮时，它应该一次移动两个对象。第一个对象是一个div，包含一个图像、一个徽标(代码的第2行((位于'.parent'div内部(和按钮本身。它有效。div在类似的div之间向右移动。
当我试图用音频(音频与徽标img具有相同的类，因此可以被识别为已分配(移动相应的div(在html文件的不同部分(时，问题就开始了。但它似乎没有移动。我在代码中可能写错了什么？
总的想法是，比方说，我有20个div，它们具有代表不同音频文件的可点击图像。当点击其中一个时，由于使用.attr找到了相应的类，相应的音频文件开始播放，并且它起作用了。
现在，我试图使这些徽标和音频向右或向左移动，所以当我将第一个带有徽标的div向右移动一步时，在包含这些相应音频的div集中，带有音频的div("audio"与img具有相同的类(也应该发生同样的事情-它也应该向右移动一个位置(因此成为带有音频的divs集中的第二个div(。
$('.parent').on('click', '.moveright', function() {
$($(this).closest('div.c')).insertAfter($($(this).closest('div.c')).next('div.c'));
const imgClasses3 = $($('.moveright').first('div.c img.r')).attr('class');
const selector3 = 'audio.' + imgClasses3.split(' ').join('.');
$($(selector3).closest('div.aud')).insertAfter($($(selector3).closest('div.aud')).next('div.aud');
})
您可能需要考虑使用CSS flex order属性。下面是一个例子或3个方块，当你点击它们时会转到前面。
.square{
background: red;
width: 200px;
height: 200px;
}
.square:first-child{
background-color: blue
}
.square:last-child{
background-color: green
}
.wrapper{
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
}
<body>
<div class="wrapper">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
$(".square").on("click", function() {
$(".square").css("order", '') //Resets the order for all before adding priority to the one you clicked
$(this).css("order", "1")
})