JS开发轮播图时if语句内等于号被高亮、功能不生效问题求助

核心问题原因 #

1. 条件判断语句误用赋值运算符
   你在if判断里使用的=是赋值操作，执行时会直接修改元素的样式，而非做值的比对。编辑器高亮等于号就是在提示你「条件判断中出现赋值操作，大概率是语法错误」。即使替换为==判断，也会因为取值方式错误无法得到正确结果。
2. 样式读取方法错误
   element.style只能读取元素行内属性中声明的样式，你在CSS类中定义的display属性无法通过这个方法获取，需要用getComputedStyle()API读取元素最终生效的计算样式。
3. 样式赋值写法不规范
   直接给element.style赋值完整样式字符串容错率低，更稳妥的写法是直接修改style对象下的对应属性，比如element.style.display = 'block'。

修复后的完整代码 #

HTML代码（和原有一致无需修改） #

<div class="card1" id="card1">
</div>
<div class="card2" id="card2">
</div>
<div class="card3" id="card3">
</div>
<button onclick="change()">Change</button>

CSS代码（和原有一致无需修改） #

.card1{
    width: 40%;
    height: 40%;
    background-color: blue;
}
.card2{
    width: 40%;
    height: 40%;
    background-color: red;
    display: none;
}
.card3{
    display: none;
    width: 40%;
    height: 40%;
    background-color: green;
}

JS代码 #

var card1 = document.getElementById("card1")
var card2 = document.getElementById("card2")
var card3 = document.getElementById("card3")

function change(){
    // 获取元素生效的display属性
    var card1Display = getComputedStyle(card1).display
    var card2Display = getComputedStyle(card2).display
    var card3Display = getComputedStyle(card3).display

    // 当前显示card1，切到card2
    if(card1Display === 'block' && card3Display === 'none'){
        card1.style.display = 'none';
        card2.style.display = 'block';
        return
    }
    // 当前显示card2，切到card3
    if(card2Display === 'block' && card1Display === 'none'){
        card2.style.display = 'none';
        card3.style.display = 'block';
        return
    }
    // 当前显示card3，切回card1
    if(card3Display === 'block' && card2Display === 'none'){
        card3.style.display = 'none';
        card1.style.display = 'block';
        return
    }
}

内容的提问来源于stack exchange，提问作者Mohammed Hassan