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 none

.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

Answer 2

是的，$(this)指的是被点击为jQuery对象的元素 - 实际上你必须得到class属性（$(this).attr("class")）。 jQuery包含一个hasClass方法，可能对你更好：

if ($(this).hasClass('thursday-box')) {

Answer 3

尝试这样的事情：

HTML

 <div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
        <img src="assets/images/box.png">
    </div>
    <div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
        <img src="assets/images/box.png">
    </div>
    <div data-day="saturday" class="box saturday-box col-xs-6 col-sm-3">
        <img src="assets/images/box.png">
    </div>
    <div class="weekday">
        <div data-day="thursday">
            <p><strong>Thursday</strong> Para confirmar sua reserva aceite nosso aplicativo.</p>
        </div>
        <div data-day="friday">
            <p><strong>Friday</strong> Para confirmar sua reserva aceite nosso aplicativo.</p>
        </div>
        <div data-day="saturday">
            <p><strong>Saturday</strong> Para confirmar sua reserva aceite nosso aplicativo.</p>
        </div>
    </div>

的CSS

.weekday > div {
    background-color: black;
    width: 100%;
    height: 100px;
    padding: 30px;
    margin: 2px;
    border-radius: 5px;
    display: none;
    color: white;
}

Javascript / Jquery

$('.box').on('click', function(){
    $('.weekday > div').hide();
    $('.weekday > div[data-day="'+$(this).data('day')+'"').show();
})

参见示例

http://jsfiddle.net/Papacidero/zqoLb1L9/1/

用jquery比较类

3 个答案: