Reputation: 79
how can i convert this to jQuery?
openDish("balkandish1")
function openDish(dishName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(dishName).style.display = "block";
}
Upvotes: 2
Views: 51
Reputation: 115212
Use show()
and hide()
methods.
openDish("balkandish1");
function openDish(dishName) {
// get all elements using class selector
// hide them using `hide()` method
$(".city").hide();
// get the element using `id` selector
// make it visible using `show()` method
$('#' + dishName).show();
}
openDish("balkandish1");
function openDish(dishName) {
$(".city").hide();
$('#' + dishName).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="city">1</div>
<div class="city">2</div>
<div class="city">3</div>
<div class="city" id="balkandish1">4</div>
<div class="city">5</div>
<div class="city">6</div>
Upvotes: 2
Reputation: 39322
jQuery offers .show()
and .hide()
function that can be used to hide and show DOM elements.
openDish("balkandish1");
function openDish(dishName) {
$(".city").hide();
$('#'+ dishName).show();
}
Upvotes: 2
Reputation: 337560
You just need to call hide()
and show()
on the relevant selectors, like this:
openDish("balkandish1")
function openDish(dishName) {
$(".city").hide()
$('#' + dishName).show();
}
Upvotes: 3