I want to add a class to a div on a button click, I have the below code, but I cannot get the jquery working correctly:
$(document).ready(function()
{
$('.edit-btn').click(function()
{
$(this).closest('.edit-box').addClass('open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p>status</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> name</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p>username</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p>bio</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 4
</div>
</div>
</div>
Clicking on the button will add a class to div i.e .edit-box. So only on the clicked button will add class to relevant div.
This code adds the open class to the edit-box div that comes after the button that is clicked.
It works by finding the parent of the button (i.e. the flex-btn container div), then getting the next element that has the class edit-box.
To see it working below I've added a background colour to the .edit-box and .edit-box.open divs so you can see it changing when the button is clicked:
$(document).ready(function() {
$('.edit-btn').click(function() {
$(this).parent().next('.edit-box').addClass('open');
});
});
.edit-box {
background: #ccffff;
}
.edit-box.open {
background: #ccccff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p>status</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> name</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p>username</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p>bio</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 4
</div>
</div>
</div>
Do I understand you correctly?
$(document).ready(function()
{
$('.edit-btn').click(function()
{
//$('.edit-box').removeClass('open');
$(this).closest('.col').find('.edit-box').addClass('open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p>status</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> name</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p>username</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p>bio</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 4
</div>
</div>
</div>
Personally, I would add this to all of the divs that wrap around the buttons:
onclick="this.nextElementSibling.classList.add('open');"
That's not what you asked though, so here is how to get your thing working (using vanilla javascript):
document.querySelectorAll('.edit-btn').forEach(button => {
button.addEventListener("mouseup", () => {
button.parentElement.nextElementSibling.classList.add("open")
})
})
Related
I'm stuck with problem in cypress
there is dynamic DOM:
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
elements .Item appear dynamically how I can wait until "Item" with
<div class="Name"> Name3 </div>
<div class="Color"> Color3 </div>
appear in this list and get .Item via Cypress
DOM before
before
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
</div>
after
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or it could be
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
need to wait second row appear by Name and Color
Since class="Item" is the common factor, use a cy.get() with retry on the count of it.
cy.get('.Item').should('have.length', 2)
on npm there is a package named cypress-wait-until that should work fine
Installation
npm i -D cypress-wait-until
Import
import 'cypress-wait-until';
Usage
Refere to the official npm site
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");
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
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.
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});