javascript - 一个(很有可能)功能无法正常工作

我想做的事情似乎比吃蛋糕要简单。但是，它根本不起作用！

首先，我将发布JavaScript代码，以便您了解我在说什么：

var opIndex = 0;

$("#CCT").click(function(){
    opIndex = 1;
});
$("#CCO").click(function(){
    opIndex = 0;
});

if (opIndex == 0) {
    $("#CCO").css("display", "none");
    $("#CCT").css("display", "table");
};
if (opIndex == 1) {
    $("#CCO").css("display", "table");
    $("#CCT").css("display", "none");
};

您可能想知道为什么我不使用else而不是另一个if，但是我有未来的理由。也就是说，我也尝试过。也没用。
顺便说一句，#CCO和#CCT都是divs和display: table，里面是divs和display: table-cell，我正在垂直对齐。如果需要，这是HTML代码：

<div class="controlzCont" id="CCO">
    <div class="controlzH" id="prevH">
        <img src="../images/icons/black/prev.png" width="100%" alt="Prev" class="arrowB" id="prevImg">
    </div>
</div>
<div class="controlzCont" id="CCT">
    <div class="controlzH" id="nextH">
        <img src="../images/icons/black/next.png" width="100%" alt="Prev" class="arrowB" id="nextImg">
    </div>
</div>

我检查了点击是否没有注册，但这不是问题。我在外部创建的单击上调用了一个函数。是alerted我是opIndex。有效。

然后，我从alerting函数中尝试了opIndex if。由于最初，opIndex为0，所以if (opIndex == 0)函数alerted表示页面加载。

我什至不十分了解问题所在，更不用说如何解决了。

有什么帮助吗？

提前致谢。

最佳答案

if语句仅按照您的方式执行一次。也许以下适合？

$("#CCT").click(function(){
    $("#CCO").css("display", "table");
    $("#CCT").css("display", "none");
});

$("#CCO").click(function(){
    $("#CCO").css("display", "none");
    $("#CCT").css("display", "table");
});

也许更简单的实现将分别声明显示CSS，并使用以下代码：

$(".controlzCont").click(function() {
    $(".controlzCont").show();
    $(this).hide();
})