javascript - 类与 jquery 比较

Question

我制作了 3 个框，我想在点击时为每个框显示不同的文本。

HTML:

    <div class="box thursday-box col-xs-6 col-sm-3">
        <img src="assets/images/box.png">
    </div>
    <div class="box friday-box col-xs-6 col-sm-3">
        <img src="assets/images/box.png">
    </div>

    <div class="box saturday-box col-xs-6 col-sm-3">
        <img src="assets/images/box.png">
    </div>

我有文本:

        <div class="thursday display">
            <p>Para confirmar sua reserva aceite nosso aplicativo.</p>
        </div>

我还有其他的，但我只用第一个盒子测试。

<!--         <div class="friday display">
                <p>Para confirmar sua reserva aceite nosso aplicativo.</p>
            </div>
            <div class="saturday display">
                <p>Para confirmar sua reserva aceite nosso aplicativo.</p>
            </div>    --> 

我为 3 制作了相同的样式表:

.thursday,
.friday,
.saturday {
    background-color: black;
    width: 100%;
    height: 100px;
    padding: 30px;
    margin: 2px;
    border-radius: 5px;
}

而且我还配置了不显示

.display {
    display: none;
}

现在我需要第一个文本仅在单击第一个框时出现，如此连续

为此，我做了这段代码:

$(document).ready(function () {
    $('.box').on('click', function() {
        if ($(this) == '.box.thursday-box') {
            $('.thursday').toggleClass('display');
        }
        else {
            alert('error');
        }
    });
});

因此，只有当我单击的框具有类 .box.thurday-box 时，才会出现第一个文本。但它正在返回错误，任何人为什么？

我做错了什么？

Answer 1

我会为此使用 data():

<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">...</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">...</div>
<div data-day="saturday" class="box saturday-box col-xs-6 col-sm-3">...</div>

然后:

var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');

参见 Documentation