Question

如果单击具有模块ID的div，则div将获得一个附加的类，该类为“活动”。有了这个额外的类，我使边框变为实线并显示具有相同模块的行。但是我需要获得有关jQuery的帮助，因此相同的过程也可以与其他div一起使用。

因此，如果单击了下一个div，则上一个被单击且处于活动状态的div需要将其班级移除（因此处于非活动状态）并将其行隐藏。下一个选定的div需要与上一个相同的过程。

有人可以帮助我将我所拥有的信息放入下面的示例jQuery中吗？

//These are clickable images with dotted borders.
<div id="a-module" class="single_image series-border-dotted active">
<div id="b-module" class="single_image series-border-dotted">
<div id="c-module" class="single_image series-border-dotted">
<div id="d-module" class="single_image series-border-dotted">

//These rows are hidden on load. 
<div id="row-a-module">
<div id="row-b-module">
<div id="row-c-module">
<div id="row-d-module">

//jQuery what I have
$("#a-module").click(function(){
    $("#row-a-module").show();
    $(this).addClass("active");
});

//jQuery example that I maybe need.
$(".example").click(function(e) {
    e.preventDefault();
    $('.row').fadeOut('slow');
    $('#' + $(this).data('id')).fadeIn('slow');
});

//CSS
.series-border-dotted.active{border-style:solid!important;}

Answer 1

将类module添加到所有#*-module div中。将类row-module添加到所有#row-*-module div中。

然后：

$('.module').click(function () {         // click on any module-div
    $('.module').removeClass('active');  // remove .active from all module-divs
    $(this).addClass('active');          // add .active to the clicked div

    $('.row-module').hide();             // hide all row-divs
    $('#row-' + this.id).show();         // show the corresponding row-div
});

显示div onclick，添加类，并在其他div上获得相同的过程

1 个答案: