Wie Titel "City" zu verbergen, wenn Sie auf diese Div in PHP-Seite klicken?

Question

Ich versuche, den Titel "City" zu verbergen, wenn jemand auf ein div klickt. Für Beispiel Wenn ein Klick auf Victoria div und dann der Titel "City" nur für dieses div angezeigt wird, bleiben andere divs unberührt. Wenn Sie auf Toronto div klicken, wird der Titel "City" ausgeblendet und der Titel von Victoria div wird angezeigt. Es ist ähnlich wie bei meiner vorherigen Frage, "wie man dieselbe onclick-Funktion mehrmals in PHP-Seite verwendet?", Aber es wird hier nicht funktionieren. Irgendeine Lösung mit Javascript, Jquery?

Php-Code:

<?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

Möchten Sie folgendes Verhalten:

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

.active .CityTitle { 
 
    display: none; 
 
}

<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>

Answer 2

ich unten Lösung denken Sie hilfreich sein können, erstellen Klick Ereignis der div, und finde die Klasse 'CityTitle', die du direkt in dir hast, mit der Klasse code and hide. Versuchen Sie diesen Code:

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

Ich hoffe, das Ihnen helfen wird.

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>

Hope this macht glücklich