自动增加HTML类/ ID以区分div

时间：2017-09-05 16:47:56

标签： javascript jquery html css

我目前正在开发一个应用程序，在这个应用程序中，用户会获得一系列带有详细信息的div列表，每个div中还有隐藏的详细信息，可以由用户切换。问题是当你点击＆＃34;详细信息＆＃34;对于一个盒子，它在所有盒子上切换类，而不是在单击的盒子内切换。我一直在寻找这个问题的答案，并且尝试自动增加ID＆C / Class，以便创建的每个框都有一个唯一的标识符。我需要做到这一点，以便＆＃34;额外细节＆＃34;仅在卡片上打开＆＃34;详细信息＆＃34;点击。提前感谢您的帮助。

我的代码

＆＃13;
＆＃13; 
$(".card-details").on("click", function (e) {
            e.preventDefault();
            $(".extra-details").toggleClass("hidden");
        });
＆＃13; 
h4 {
 padding:10px 0 0 5px;
 font-size:18px;
 font-weight:bold;
}
.card {
    border:none;
    box-shadow:2px 2px 5px rgba(201,201,201, .5);
    padding:5px;
    margin:5px;
    max-width:350px;
    background:transparent;
    border:1px solid #efefef;
    font-size:12px;
}
hr {
    border:1px solid #efefef;
    width:100%;
    margin-top:0;
}
.card-head {
    color:#005ABB;
}
.card-container{
    margin-top:20px;
    margin-left:5px;
}
.card-info {
    margin-left:20px;
    background:transparent !important;
}
.card-details {
    color:#005ABB;
    margin-left:85%;
}
.card-details:hover {
    text-decoration:underline;
    color:#F9A51B;
    cursor:pointer;
}
.hidden{
    display:none !important;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
                <div class="container">
                    <div class="row card-container">
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：5)

$(this).siblings('.extra-details').toggleClass('hidden')将达到你想要的效果。

另请注意，您的详细信息＆＃39;元素实际上不是一个链接，只是一个样式，所以你不需要e.preventDefault()行。

答案 1 :(得分：1)

尝试：

$(".card-details").on("click", function (e) {
    e.preventDefault();
    $(this).siblings(".extra-details").toggleClass("hidden");
});

答案 2 :(得分：1)

这对我有用。

我刚刚更改了javascript代码，如下所示。

$(".card-details").click(function() {
    $(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
 padding:10px 0 0 5px;
 font-size:18px;
 font-weight:bold;
}
.card {
    border:none;
    box-shadow:2px 2px 5px rgba(201,201,201, .5);
    padding:5px;
    margin:5px;
    max-width:350px;
    background:transparent;
    border:1px solid #efefef;
    font-size:12px;
}
hr {
    border:1px solid #efefef;
    width:100%;
    margin-top:0;
}
.card-head {
    color:#005ABB;
}
.card-container{
    margin-top:20px;
    margin-left:5px;
}
.card-info {
    margin-left:20px;
    background:transparent !important;
}
.card-details {
    color:#005ABB;
    margin-left:85%;
}
.card-details:hover {
    text-decoration:underline;
    color:#F9A51B;
    cursor:pointer;
}
.hidden{
    display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
                <div class="container">
                    <div class="row card-container">
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
                            <h4 class="card-head">20 Foot Titan Chassis</h4>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Equipment Type
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Available Quantity
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 pull-left card-info">
                                    Selected Quantity
                                </div>
                            </div>
                            <div class="col-xs-12 card-details">
                                Details
                            </div>
                            <div class="row extra-details hidden">
                                <div class="col-xs-12 card-info">
                                    Address: Test Address
                                </div>
                                <div class="col-xs-12 card-info">
                                    Hours of Operation: Weekdays 9AM - 5PM
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

相关问题
最新问题