Question

我试图在点击特定div时显示特定的段落。我无法让jQuery按照我希望的方式运行。

我希望如果＆＃34;。病毒＆＃34;单击div，它显示内容＆＃34; v＆＃34;，如果＆＃34; .screenRepair＆＃34;单击div然后它显示＆＃34; .screenInfo＆＃34;内容

任何帮助都将不胜感激。

HTML：

<div class="outerService">
    <div class="service">
        <div class="virus" style="width: 230px; height: 208px;">
            <center>
                <h3 style="width:200px; text-align:center">Computer Virus</h3>
                <img src="images/Services/virus.jpg" alt="virus" height="140px"/>

            </center>
        </div>

        <div class="information">
            <p class="v">This is information</p>
            <p class="screenInfo">hello</p>
        </div>
        <div class="screenRepair" style="width: 230px;">
            <center>
                <h3 style="width:auto; text-align:center">Screen Replacement</h3>
                <img src="images/Services/smashedScreen.jpg" alt="BrokenScreen" height="140px"/>

            </center>
        </div>
    </div>
</div>

CSS：

.outerService {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    border: 1px solid blue;
}

.service {
    display: table;
    height: auto;
    max-width: 1044px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
}

.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
    width: 250px;
    height: 208px;
    float: left;
    max-height: auto;
    text-align: center;
    margin-left: 10px;
    border: 1px solid #000;
}


#vInfo {
    float: none;
    width: 50%;
    text-align: justify;
    border: 1px solid #000;
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.information {
    margin-left: 10px;
    border: 3px solid green;
    margin-top: 230px;
    margin-bottom: 12px;
    height: 200px;
    max-width: 100%;
    display: none;
}

    .information p {
        text-align: justify;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }

的jQuery

$(document).ready(function () {

    $(".virus").click(function () {
        $(".information .v").show();
    });
});

Answer 1

使用您当前的CSS，您可以尝试这样的事情：

 .information {
      margin-left: 10px;
      border:3px solid green;
      margin-top: 230px;
      margin-bottom: 12px;
      height: 200px;
      max-width: 100%;
 }

或者你可以稍微改变你的CSS并尝试隐藏.information中的每个P而不是隐藏.information本身。

希望这有帮助。

Answer 2

更改css中的信息div属性（删除显示：无）

 .information .v {
       display:none;
 }

 .screenInfo{
       display: none;
 }

并将此行添加到您的css

{{1}}

Answer 3

尝试这样的事情：

$(".service img").click(function () {
    $(".information .v").toggle($(this).closest('div').hasClass('virus'));
    $(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});

.hasClass()返回布尔值true/false。

.toggle(true)结果显示隐藏的对象，.toggle(false)导致隐藏对象。

根据评论中的建议，您需要隐藏所有信息而不是.information div。否则你需要在显示任何其他信息div之前显示这个。

其他一些编辑可以像：

.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
    width: 250px;
    height: 208px;
    float: left;
    max-height: auto;
    text-align: center;
    margin-left: 10px;
    border: 1px solid #000;
    display: none; /*<-----add this to hide the info divs.*/
}

.information {
    margin-left: 10px;
    border: 3px solid green;
    margin-top: 230px;
    margin-bottom: 12px;
    height: 200px;
    max-width: 100%;
    display: none;
}

然后你可以再添加一行：

$(".service img").click(function () {
    $(".information").show(); //<----show it before showing any other div.
    $(".information .v").toggle($(this).closest('div').hasClass('virus'));
    $(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});

可能你想看看这个：

$(".service > div:not(.information)").click(function () {
    $(".information").hide().show(); //<----show it before showing any other div.
    $(".information .v").toggle($(this).hasClass('virus'));
    $(".information .screenInfo").toggle($(this).hasClass('screenRepair'));
});

Answer 4

如果要显示和隐藏div

，请使用切换

尝试这样的事情：

jQuery(document).ready(function(){
    jQuery('#virus').live('click', function(event) {        
         jQuery('#information').toggle('show');
    });
});

在这里工作的是JS Fiddle

Answer 5

$(document).ready(function() {

            $(".virus").click(function() {
                $(".information").show().find('p').show().next('.screenInfo').hide();
            });

             $(".screenRepair").click(function() {
                $(".information").show().find('p').show().prev('.v').hide();
            });
 });

JSFiddle

Answer 6

试试这个

$(document).ready(function () {
        $(".virus").click(function() {
            $(".information").show();
             $(".v").show();
            $(".screenInfo").hide();
        });

         $(".screenRepair").click(function() {
            $(".information").show();
             $(".screenInfo").show();
            $(".v").hide();
        });

}）;

Answer 7

see in live

$(document).ready(function() {
            $('.virus').click(function() {
                $('.information').show();
                $('.v').show();
            });

        });


.information {display:none;}  .information p{display:none;}

在Div中显示特定段落 - jQuery

7 个答案: