Question

我有一个奇怪的问题。我在我的项目中使用.removeClass和.addClass。当你先点击下卡时，它工作正常。（1,2,3,4），（2,3,4）......但是当你一次点击卡片＆gt; 1，然后较低的卡不再工作。（2,3,4,1！2！3！，4,4,4,2！...）。为了更好地理解，我将其上传到了我的网站： http://hdesign.comehere.cz/ 尝试点击卡片1,2,3,4，然后点击1,2,3中的一个 - 他们没有＆＃39不再工作了。但如果你点击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中的类也需要更好的结构

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

2 个答案: