I want to make it so when you click a 'card' element,visible on the page,the classes show and open to be added,so you can see the card symbol. Anyone has any ideea why it doesn't work,i've selected it but it seems like it won't work...
Like i am selecting,iterating throught the card array adding to each card an event listener and toggling the class,why wouldn't it work?
I have this html
let card = document.getElementsByClassName("card");
let cards = [card];
// whenever something unexpected is going on
// that operates on/with a variable of yours
// do this:
console.log(typeof cards);
for (i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function() {
this.classList.toggle("open");
this.classList.toggle("show");
});
}
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
document.getElementsByClassName("card") returns an array, so your card variable is already an array. let cards = [card]; adds your array to another array.
This is why your for loop does nothing. Try this instead:
let cards = document.getElementsByClassName("card");
for (i=0;i < cards.length;i++) {
cards[i].addEventListener("click", function(){
this.classList.toggle("open");
this.classList.toggle("show");
});
}
You're almost there. Just go
let cards = document.getElementsByClassName("card");
and remove the line saying
let cards = [card];
let cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function() {
this.classList.toggle("open");
this.classList.toggle("show");
});
}
.deck {
list-style-type: none;
display: flex;
}
.card {
border: 1px solid #ddd;
width: 20px;
height: 30px;
}
.open::before {
content: "o"
}
.show::after {
content: "s";
}
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
If for some reason you want to cast your HTMLCollection that returns from document.getElementsByClassName("card") to a native Array, use Array.from:
let card = document.getElementsByClassName("card");
let cards = Array.from(card); // or [...card]
Related
I have the following html:
<ul class="collection">
<li>a
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>s
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>w
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
I have an onclick listener on the UL (called taskList). console.log says the element UL (taskList) is an object. Can I iterate through the li's as follows:
for (const task in taskList) {
console.log(task);
}
No, for ... in will loop over the properties of the object. You could use for ... of to loop over the children.
const taskList = document.querySelector('ul.collection');
for (const task of taskList.children) {
console.log(task.outerHTML);
}
<ul class="collection">
<li>a
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>s
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>w
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
I have the following html with two lists, and I want to press a button and swap the ul's, li´s elements between the two
<ul class="list-group" id="lines">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
I have tried to accomplish this with the following jquery code
$("#swaplists").click(function () {
var $temp1 = $("#lines").children.clone;
var $temp2 = $("#columns").children.clone;
clearLinesAndColumns();
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
the expected result would be
<ul class="list-group" id="lines">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
But I get the error
Uncaught TypeError: Cannot read property 'appendTo' of undefined
How can I achieve this functionality with jquery and why is children.clone undefined?
Instead of cloning and appending, you can simply get the html() and insert in other:
$("#swaplists").click(function() {
var linesHtml = $("#lines").html();
var columnsHtml = $("#columns").html();
$("#lines").html(columnsHtml);
$("#columns").html(linesHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
<li class="list-group-item"> 1 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<button id="swaplists">Swap</button>
$("#swaplists").click(function () {
var $temp1 = $("#lines").children().clone();
var $temp2 = $("#columns").children().clone();
clearLinesAndColumns();
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
You forgot to put '()' after calling 'children' and 'clone'...those are methods.
Here is the sample code:
$("#swaplists").click(function() {
var $temp1 = $("#lines li");
var $temp2 = $("#columns li");
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
<li class="list-group-item"> 1 <i class="fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<button id="swaplists">SWAP LISTS</button>
Below is my code for a nav-bar. Can someone please help me in activating the toggle button. It does not respond on click. I just want it to toggle the content of sidebar-wrapper. I want it to be completely visible and once I click on the button it should disappear and should come back once I hit the toggle button again. Am pretty new to this. Any help is appreciated.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" style="border:none;"><span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button></li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<img src="images/logo.png">
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: black">
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-stacked" id="menu">
<li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
<a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>
<li onclick="showMainDivision('bills','legislate','committees','favourites')">
<a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
</li>
<li onclick="showMainDivision('committees','bills','legislate','favourites')">
<a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
</li>
<li onclick="showMainDivision('favourites','committees','bills','legislate');">
<a ng-click="getFavourites()" id="fav_load"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
</li>
</ul>
</div>
</div>
</div>
</div>
function toggleDIV(DIV)
{
if(document.getElementById(DIV).style.display=="none")
{
document.getElementById(DIV).style.display="block"
}
else
{
document.getElementById(DIV).style.display="none"
}
}
// use it like:
// onClick="toggleDIV('myDivName')";
In my application a sidebar is there and it toggles when we click on it.Also I want to hide and show some table data but when I add code for this the sidebar doesnot toggle.May I know why this happened.
I want to hide table columns but when I did this my sidebar dropdown stops working.
This code is for sidebar toggle is working fine.
function goToUrl(id)
{
if(user_type_id!=3)
{
if(id==0)
{
$('.hideAndShow').toggle();
document.location="Doctor";//News
}
else
if(id==1)
{
$('.hideAndShow').toggle();
document.location="Device";//cases
}
if(id==2)
{
// $('#addJournals').toggle();
// $('#listingJournals').toggle();
$('.hideAndShow').toggle();
document.location="Associate";//journal
}
if(id==3)
{
$('.hideAndShow').toggle();
document.location="Patient";//gallery
}
}
else
{
if(id==0)
document.location="Doctor";
else
if(id==1)
document.location="Device";
if(id==2)
document.location="Associate";
else
if(id==3)
document.location="Patient";
}
}
<aside class="left-side sidebar-offcanvas" style="min-height: 260px;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- <div class="user-panel">
<div class="pull-left image">
<img src="img/avatar3.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p id="imageAdmin"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div> -->
<ul class="sidebar-menu">
<!-- <li id='dashboard'>
<a href="/dashboard">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li> -->
<li class='treeview' id='Doctor'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-stethoscope"></i>
<span onclick="goToUrl(0)">Manage Doctor</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDoctor?id=0" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/doctor?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='treeview' id='Device'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-mobile"></i>
<span onclick="goToUrl(1)">Manage Device</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDevice" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/device?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='active' id='Report'>
<a href="/reports">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-list-alt"></i>
<span>Reports</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
but when i add following code sidebar not toggle
$(document).ready(function(){
$("#hi").click(function(){
// $("p").hide();
$('td:nth-child(3)').hide();
});
$("#sh").click(function(){
// $("p").show();
$('td:nth-child(3)').show();
});
});
please help me.
I have a jsp that generates the following html structure:
<ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_727">
<li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_726">
<i class="fa fa-plus"></i> <i class="fa fa-folder"></i> Prueba 1
<ul class="files" style="display: block;">
<li class="file"> <i class="fa fa-file"></i> welcome_tools </li>
<li class="file"> <i class="fa fa-file"></i> welcome_learn </li>
<li class="file"> <i class="fa fa-file"></i> welcome_cube </li>
<li class="file"> <i class="fa fa-file"></i> welcome_community </li>
</ul>
<ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_725" style="display: block;">
<li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_724">
<i class="fa fa-folder-open-o"></i> Sub 1
<ul class="files" style="display: block;">
<li class="file"> <i class="fa fa-file"></i> helpful_links_for_using_liferay_portal </li>
</ul>
<ul class="folders" style="display: block;" id="yui_patched_v3_11_0_1_1410259364795_798">
<li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_797">
<i class="fa fa-folder-open-o"></i> Sub Sub 1
<ul class="folders" style="display: block;"> </ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And i have the following javascript
$("li.folder")
.css("cursor", "pointer")
.on("click", function(){
$this = $(this);
$this.find("ul.files,ul.folders").toggle(200);
return false;
});
For a tree-like functionality.
The problem is whenever i click an a it fires the li.folder event. How can i make it so that the link behaves as a link.
Codepen link: http://codepen.io/anon/pen/Hokgt
You can just exclude the anchor
$("li.folder")
.css("cursor", "pointer")
.on("click", function(e){
if ( ! $(e.target).is('a') ) {
$(this).find("ul.files,ul.folders").toggle(200);
}
return false;
});
or go the other way, and stop the propagation
$("li.folder a").on('click', function(e) {
e.stopPropagation();
});