jQuery show/hide methods arent working - javascript

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

Related

How to update all easypiecharts in JavaScript(js)

I have a problem and that is I can not update all charts in my program.
I can update one of the four charts with the following command, but I cannot update the other three.
$('.chart').data('easyPieChart').update(60);
This is my html code
<div id="content">
<div class="b-skills">
<div class="container">
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block align:center">
<div class="chart-container">
<div id="CO" class="chart" data-percent="0">
</div>
</div>
<p id="COP">CO</p>
<p id="colim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="CO2" class="chart" class="boba" data-percent="90">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="CO2P">CO2</p>
<p id="valueCO2"></p>
</div>
</div>
</div>
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="Volume" class="chart" data-percent="0">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="laermP">Lautstärke</p>
<p id="laemlim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="yes4" class="chart" data-percent="">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="feuchtigkeitP">Luftfeuchtigkeit</p>
<p id="teamplim"></p>
</div>
</div>
</div>
</div>
</div>
How can i update all four charts separatly, so i can change every chart value independently.

Clicking popup button

I need to do a function that
if class="btn btn-default" exists
click them
this would be problematic bcz there are more btn defaults besides this ones :D
so how do i work with the "Chest unlocked"
<div class="chest_container">
<div class="chest unlocked"></div>
Here's the html
<div id="daily_bonus_content">
<div class="rewards_grid">
<div class="reward day_1">
<div class="center">
<div class="chest_container">
<div class="chest unlocked"></div>
<div class="day">1</div>
<div class="actions">Abrir</div>
</div>
</div>
</div>
<div class="reward day_2">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">2</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_3">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">3</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_4">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">4</div>
<div class="actions"></div>
</div>
</div>
</div>

In vanillaJS, clicking every btn-default in a chest_container
var buttons = document.querySelector(".chest_container .btn-default");
buttons.forEach(function(button) {
button.click();
});
If you catch the click in an event, you can reach the chest_unlocked by doing the following, where e is the event:
var chestUnlockedDiv = e.target.parentElement.parentElement.querySelector(".chest.unlocked");

Remove parent element [duplicate]

This question already has answers here:
JQuery Remove Parent Elements
(3 answers)
Closed 6 years ago.
can someone help me solve this problem.
I want loop through class 'row' and delete entire class 'card-col' that contain id=x2 or x3.
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3"></div>
</div>
</div>
</div>
expected result something like this.
what jquery i can use ?
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4"></div></div>
</div>
</div>
thanks

Go quickly trough the jQuery docs:
Selectors how to get an element using the right selectors
.closest() test up the DOM tree finding the closest matching element
.remove() yep.
jQuery(function($) { // DOM is now ready
$("#x2, #x3").closest(".card-col").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>
The other way around, you can target first all .card-col and that use :not(:has(#x1)) to filter and than remove
https://api.jquery.com/not-selector/
https://api.jquery.com/has-selector/
jQuery(function($) { // DOM is now ready
$(".card-col:not(:has(#x1))").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>

You could use parents() :
$("#x2, #x3").parents(".card-col").remove();
Hope this helps.
$("#x2, #x3").parents(".card-col").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4">x4</div>
</div>
</div>
</div>

jQuery - only target class elements with same parent

So i have a lot of profiles and thereby many divs which are repeated again and again
Now i want to target a class element with jquery and animate another class element in the same profile
in my case:
$(',profile_menu').click(function() {
$( ".profile_like" ).removeClass( "m_hidden" )
$(".profile_like").animate({
left: 0+'%'
},300);
The Problem is that i only want to target the classes which are in the same profile.
I hope that the issue has been well described.
<!-:::::::::::::::::::: Profile 1::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 2::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 3::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 4::::::::::::::::::::::::::::::::::::::::-->
...
...
...

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

Categories

Resources