如何隐藏标题＆＃34; City＆＃34;在php页面中单击该div时？

Question

我试图隐藏标题，＃34; City＆＃34;，当有人点击div时。对于前者如果单击维多利亚div，则标题，＆＃34; City＆＃34;，仅为该div隐藏，其他div不受影响。如果你点击多伦多div，它的标题＆＃34; City＆＃34;隐藏了维多利亚div的标题。它类似于我之前的问题，＆＃34;如何在php页面中多次使用相同的onclick功能？＆＃34;，但它不会在这里工作。任何使用javascript的解决方案，Jquery？

Php代码：

<?php
$link = mysqli_connect("localhost", "root", "", "test");
// Check connection
if($link === false)
{
 die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
   $sql = "SELECT * FROM sample";
   if($result = mysqli_query($link, $sql))
{
   if(mysqli_num_rows($result) > 0)
{

    while($row = mysqli_fetch_array($result))
    {
            echo "<div style='border: 2px solid black;'><p class='CityTitle".$row['id']."'>City</p>". $row['UserCity'] ."</p></div></br>";
    }
    // Close result set
    mysqli_free_result($result);
  } 
   else
  {
    echo "No records matching your query were found.";
  }
 } 
  else
 {
   echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
 }
  // Close connection
  mysqli_close($link);
 ?>

Answer 1

您想要以下行为：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".cityContainer > div").click(function() {
    $(".cityContainer").find(".active").removeClass("active");
    $(this).addClass("active");
  });
});

＆＃13;

.active .CityTitle {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="cityContainer">

  <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Victoria</div>
  </br>

  <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Toronto</div>
  </br>

 <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Ottawa</div>
  </br>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为以下解决方案可能对您有所帮助，创建div的点击事件，并找到您在代码中正确的类“CityTitle”并使用该类隐藏。试试这段代码：

$('document').on('click','div',function(){
    $(this).find('.CityTitle').hide();
})

我希望这会对你有所帮助。

Answer 3

$('.cityName').click(function(){
  $(this).parent().find('.cityHeading').hide();
})

.cityBorder{border:1px solid #000; padding:10px; margin-bottom:10px}
.cityHeading{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">Ottawa</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">victoria</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">st.john's</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">Totonto</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">quebee city</div></div>

希望这会让你开心