removeClass，addClass 仅适用于相同/更高的 div 然后单击

Question

我遇到了一个奇怪的问题。我在我的项目中使用 .removeClass 和 .addClass 。当您首先单击较低的卡时，它工作正常。 (1,2,3,4), (2,3,4)... 但是当您点击卡片 > 1 时，较低的卡片将不再起作用。 (2,3,4,1!,2!,3!,4,4,4,2!...)。为了更好地理解，我将它上传到我的网络上：http://hdesign.comehere.cz/ 尝试点击卡片 1、2、3、4，然后点击 1、2、3 之一 - 它们不再起作用.但是，如果您单击 4，那将起作用。所以基本上工作卡，whitch 相同 或 更高然后卡最后点击。这是一个代码：

<script>
//CARD1
$( document ).ready(function() {
    $(".icon_card1").click(function () {
        $(".card1bg").css('opacity', '1');
    });
    $(".icon_card1").click(function () {
        $(".card1_content").css('margin-left', '0%');
    });
    $(".card1_content_arrow").click(function () {
        $(".card1_content").css('margin-left', '-45%');
    });
    $(".card1_content_arrow").click(function () {
        $(".card1bg").css('opacity', '0');
    });
    $(".icon_card1").on('click', function() {
        $(".card1").removeClass('animace1back').addClass('animace1');
    });
    $(".card1_content_arrow").on('click', function() {
        $(".card1").removeClass('animace1').addClass('animace1back');
    });
    $(".icon_card1").on('click', function() {
        $(".card2").removeClass('animace2back').addClass('animace2');
    });
    $(".card1_content_arrow").on('click', function() {
        $(".card2").removeClass('animace2').addClass('animace2back');
    });
    $(".icon_card1").on('click', function() {
        $(".card3").removeClass('animace3back').addClass('animace3');
    });
    $(".card1_content_arrow").on('click', function() {
        $(".card3").removeClass('animace3').addClass('animace3back');
    });
    $(".icon_card1").on('click', function() {
        $(".card4").removeClass('animace4back').addClass('animace4');
    });
    $(".card1_content_arrow").on('click', function() {
        $(".card4").removeClass('animace4').addClass('animace4back');
    });
});
</script>
<script>
//CARD2
$( document ).ready(function() {
    $(".icon_card2").click(function () {
        $(".card2bg").css('opacity', '1');
    });
    $(".icon_card2").click(function () {
        $(".card2_content").css('margin-left', '0%');
    });
    $(".card2_content_arrow").click(function () {
        $(".card2_content").css('margin-left', '-45%');
    });
    $(".card2_content_arrow").click(function () {
        $(".card2bg").css('opacity', '0');
    });
    $(".icon_card2").on('click', function() {
        $(".card2").removeClass('animace5back').addClass('animace5');
    });
    $(".card2_content_arrow").on('click', function() {
        $(".card2").removeClass('animace5').addClass('animace5back');
    });
    $(".icon_card2").on('click', function() {
        $(".card1").removeClass('animace6back').addClass('animace6');
    });
    $(".card2_content_arrow").on('click', function() {
        $(".card1").removeClass('animace6').addClass('animace6back');
    });
    $(".icon_card2").on('click', function() {
        $(".card3").removeClass('animace7back').addClass('animace7');
    });
    $(".card2_content_arrow").on('click', function() {
        $(".card3").removeClass('animace7').addClass('animace7back');
    });
    $(".icon_card2").on('click', function() {
        $(".card4").removeClass('animace8back').addClass('animace8');
    });
    $(".card2_content_arrow").on('click', function() {
        $(".card4").removeClass('animace8').addClass('animace8back');
    });
});
</script>
<script>
//CARD3
$( document ).ready(function() {
    $(".icon_card3").click(function () {
        $(".card3bg").css('opacity', '1');
    });
    $(".icon_card3").click(function () {
        $(".card3_content").css('margin-left', '0%');
    });
    $(".card3_content_arrow").click(function () {
        $(".card3_content").css('margin-left', '-45%');
    });
    $(".card3_content_arrow").click(function () {
        $(".card3bg").css('opacity', '0');
    });
    $(".icon_card3").on('click', function() {
        $(".card3").removeClass('animace9back').addClass('animace9');
    });
    $(".card3_content_arrow").on('click', function() {
        $(".card3").removeClass('animace9').addClass('animace9back');
    });
    $(".icon_card3").on('click', function() {
        $(".card1").removeClass('animace10back').addClass('animace10');
    });
    $(".card3_content_arrow").on('click', function() {
        $(".card1").removeClass('animace10').addClass('animace10back');
    });
     $(".icon_card3").on('click', function() {
        $(".card2").removeClass('animace11back').addClass('animace11');
    });
    $(".card3_content_arrow").on('click', function() {
        $(".card2").removeClass('animace11').addClass('animace11back');
    });
    $(".icon_card3").on('click', function() {
        $(".card4").removeClass('animace12back').addClass('animace12');
    });
    $(".card3_content_arrow").on('click', function() {
        $(".card4").removeClass('animace12').addClass('animace12back');
    });
});
</script>
<script>
//CARD4
$( document ).ready(function() {
    $(".icon_card4").click(function () {
        $(".card4bg").css('opacity', '1');
    });
    $(".icon_card4").click(function () {
        $(".card4_content").css('margin-left', '0%');
    });
    $(".card4_content_arrow").click(function () {
        $(".card4_content").css('margin-left', '-45%');
    });
    $(".card4_content_arrow").click(function () {
        $(".card4bg").css('opacity', '0');
    });
    $(".icon_card4").on('click', function() {
        $(".card4").removeClass('animace13back').addClass('animace13');
    });
    $(".card4_content_arrow").on('click', function() {
        $(".card4").removeClass('animace13').addClass('animace13back');
    });
    $(".icon_card4").on('click', function() {
        $(".card1").removeClass('animace14back').addClass('animace14');
    });
    $(".card4_content_arrow").on('click', function() {
        $(".card1").removeClass('animace14').addClass('animace14back');
    });
    $(".icon_card4").on('click', function() {
        $(".card2").removeClass('animace15back').addClass('animace15');
    });
    $(".card4_content_arrow").on('click', function() {
        $(".card2").removeClass('animace15').addClass('animace15back');
    });
    $(".icon_card4").on('click', function() {
        $(".card3").removeClass('animace16back').addClass('animace16');
    });
    $(".card4_content_arrow").on('click', function() {
        $(".card3").removeClass('animace16').addClass('animace16back');
    });
});
</script>

我想，我可能只是重新编写了一些课程，但我就是想不通。

Answer 1

你真的应该重新评估这里的逻辑，你有很多重复的代码，总是容易出错并且调试起来很痛苦。

我建议重构您的代码，使您拥有一个作用于元素的函数或处理程序。例如，您可以给所有图标元素一个类并将函数绑定到这些元素，然后使用单击元素上的数据属性来告诉您的函数应该对哪个元素进行操作以及应该切换哪些类。使用这种方法，您可以根据需要添加任意数量的“卡片”，而无需复制任何 javascript。

这是一个人为的例子：

$(".card-icon").on('click', function() {
        var $this=$(this);
        var $target=$($this.data('target'));
        var classes=$this.data('toggle-classes')
        $target.toggleClass(classes);
});

.card-icon{
  height:50px;
  width:100px;
  background-color:#ccc;
  margin-bottom:10px;
 }

.card{
  height:100px;
  background-color:#ccc;
}


.animace1{
  width:300px;
}
.animace1back{
  width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon_card1 card-icon" data-target=".card1" data-toggle-classes="animace1back animace1">Click Me<div><br><br>
<div class="card1 card animace1"><div>

Answer 2

您忘记删除单击“content_arrow”时添加的类

看到这个：https://jsfiddle.net/31dze2qt/12/

        $(".card1").removeClass('animace1back animace6back animace10back animace14back');
        $(".card2").removeClass('animace2back animace5back animace11back animace15back');
        $(".card3").removeClass('animace3back animace7back animace9back animace16back');
        $(".card4").removeClass('animace4back animace8back animace12back animace13back');

deDelightedD0D 是对的，代码很不对，绑定应该通过"$this"完成，甚至css中的类也需要更好的结构