在div中顯示特定的段落 - jQuery

Question

我想在特定的div被點擊時顯示特定的段落。我無法讓jQuery以我想要的方式運行。

我想的是，如果點擊了「.Virus」分區，它顯示的內容‘V’，如果點擊然後「.screenRepair」格則顯示「.screenInfo」內容

任何幫助將不勝感激。

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，你可以嘗試這樣的事：

$(document).ready(function() { 
    var $info = $('.information'); 
    $(".virus").click(function() { 
     $info.show().find('p:not(.v)').hide().siblings().show(); 
    }); 

    $(".screenRepair").click(function() { 
     $info.show().find('p:not(.screenInfo)').hide().siblings().show(); 
    }); 
}); 

或者您可以稍微更改CSS，並嘗試隱藏.information中的每個P，而不是隱藏.information本身。

希望這會有所幫助。

Answer 2

在你的CSS變化信息的div屬性（除去顯示：無）

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

並添加此行到你的CSS

.information .v { 
     display:none; 
} 

.screenInfo{ 
     display: none; 
} 

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之前顯示此信息。

---

其他一些修改可以像做：

.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;}