I'm trying to figure out how to loop through each list element one at a time and apply a function to them when they run, I've tried several methods and some hints would help!
HTML structure
<div class="custom-item">
<ul>
<li id="first-slide" class="slide active"><h1>Test</h1></li>
<li id="second-slide" class="slide"><h1>Test</h1></li>
<li id="third-slide" class="slide"><h1>Test</h1></li>
</ul>
</div>
I've worked out an each function that if i understand correctly will handle the changing of classes, this is where I'm failing to loop through each element.
$(document).ready(function() {
$( ".slide" ).each(function( i ) {
if ( this.className !== "active" ) {
this.addClass("active");
} else {
this.removeClass("active");
}
});
});
You need to use $(this).hasClass to check for "active" class.
JSFiddle
http://jsfiddle.net/39o0bagv/
JavaScript
$(document).ready(function() {
$( ".slide" ).each(function( i ) {
if ( $(this).hasClass("active") ) {
$(this).removeClass('active');
$(this).addClass("changed");
} else {
$(this).addClass("active");
}
});
});
CSS
.active {
color: red;
}
.changed {
color: blue;
}
The loop will check if the element has 'active' class and replace it with 'changed'. And vise versa.
I've added a css class so that you can see the active class being toggled. Your methods for checking, adding, and removing the class weren't write, so it was failing with a script error. See what I've done below, using the classList property. However, judging from your post title, I'm not sure if maybe you're wanting to pause on each one and then continue. In that case the javascript setInterval method might be the tool you want. http://www.w3schools.com/jsref/met_win_setinterval.asp
$(document).ready(function() {
$(".custom-item").find('.slide').each(function(){
if (!this.classList.contains("active")) {
this.classList.add("active");
} else {
this.classList.remove("active");
}
});
});
.active{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-item">
<ul>
<li id="first-slide" class="slide active"><h1>Test</h1></li>
<li id="second-slide" class="slide"><h1>Test</h1></li>
<li id="third-slide" class="slide"><h1>Test</h1></li>
</ul>
</div>
Fiddle
Fix: fiddle
$(document).ready(function() {
$('.slide').each(function(i) {
if ( !$(this).hasClass("active")) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});
Related
jQuery(document).ready(function() {
$(".list-menu").hide();
$(".head-list a").click(function() {
$(".list-menu:visible").slideUp('slow');
$(".head-list").removeClass('active-menu');
$(this).parent().addClass('active-menu').next().slideDown('slow');
return false;
});
if ($(".list-menu ul li").hasClass('active')) {
$(".list-menu").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head-list">Puchase</div>
<div class="list-menu">
<ul>
<li class="<?php if($page == 'home'){ echo 'active';} ?>">Purchase</li>
<li>Purchase List</li>
<li>Purchase3</li>
<li>Purchase4</li>
<li>Purchase5</li>
</ul>
</div>
I Wanna it to display the .list-menu that have ul li class active only.
Thank You for your answers.
You need to add each loop for multiple li.
in your code its only consider last li.
Last li don't have active class.
below is reference code for each loop with li.
$( "list-menu ul li" ).each(function( index ) {
if($(index).hasClass('active'))
{
$("index").show();
}
else
{
$("index").hide();
}
});
Here You can use it
$page=basename($_SERVER['PHP_SELF']);
<li class="menu-dropdown <?php
if(basename($_SERVER['PHP_SELF'])=="home.php"){ echo 'active'; } ?> ">
Hope it will work properlly
For convenience I would first hide .list-menu using:
$(".list-menu").css('display', 'none');
Then instead of this:
if ($(".list-menu ul li").hasClass('active')) {
$(".list-menu").show();
}
I would run the selector in a loop to check for the class named 'active' as so:
$(".list-menu ul").each(function(e){
if( $(this).hasClass('active')) {
$(".list-menu").css('display', 'block');
$(this).show();
}else{
$(this).hide();
}
});
I'm adding trivia as a main component to my webpage. I'm trying to the class of "correct" when it's right, and "wrong" when it's wrong. I have no idea what I'm doing. lol. Any help would be greatly appreciated.
<ul>
<li id="a">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
JQuery
I tried to make the correct one a variable in Jquery
var right = $( "ul li#a" ).on(click, function() {});
if (click === right){
$("ul li#a").addClass("correct");
} else {
$("li").addClass("wrong");
}
If I'm understanding your end goal, you want to do something to indicate that an answer is the "right" answer or not, then you want to assign class .correct or .wrong if they get the "right" answer or not.
I would assign data-right="right" to the "right" answer. Then when someone clicks on an li, look for that attribute and assign .correct if they chose the "right" answer, and assign .wrong if not.
$('li').on('click',function() {
var right = $(this).data('right');
$(this).siblings().removeClass('correct wrong');
if (right == "right") {
$(this).addClass('correct');
} else {
$(this).addClass('wrong');
}
})
.correct {
color: green;
}
.correct:after {
content: '\2713';
}
.wrong {
color: red;
}
.wrong:after {
content: '\2613';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a" data-right="right">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
This solution relies on giving the right answers a class called "correctAnswer", then binding a click event handler that sets the class of the clicked li based on whether or not it has that class. I think that does what you're looking for:
<ul>
<li id="a" class="correctAnswer">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
$('li').on('click', function () {
var classToAdd = $(this).is('.correctAnswer') ? 'correct' : 'wrong';
$(this).addClass(classToAdd);
});
Here is a complete example:
$( document ).ready(function() {
var correctAnser = 'a'; // you need to set this to what you need the answer to be
$('ul li').on('click', function () {
$('ul li').removeClass('correct').removeClass('wrong'); // remove both classes on list elements
var classToAdd = $(this).attr('id') == correctAnser ? 'correct' : 'wrong';
$(this).addClass(classToAdd);
});
});
.correct {
background:#2bb539;
color:#ffffff;
}
.wrong {
background:#c00;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
I am trying to style div and ul to function like . However, I have a problem that:
1) I only want to toggle the ul that I click and hide the other ul. So I wonder if jquery support some function such as 'not click'?
2) I want to hide all the ul when the mouse is click outside. I did some research, and see other people use mouseup or click on body. But I am not quiet sure how it works.
$(document).ready(function() {
$('.hide').each(function() {
$(this).hide();
});
$('.select').click(function() {
var id = '#' + $(this).attr('id');
var sub = id + '_sub';
$(sub).slideToggle();
});
$('body').mouseup(function() {
if($(this).length == 0) {
$(this).hide();
}
});
});
div.select {
display: inline-block;
margin: 10px;
padding: 20px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="1" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="1_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="2" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="2_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="3" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="3_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
here you go: DEMO
$(document).ready(function() {
$('.hide').hide(); //hide in the beginning
$('.select').click(function() {
$('.hide').slideUp(200); //hide all the divs
$(this).find('.hide').slideDown(200); //show the one that is clicked
});
$(document).click(function(e){
if(!$('.select').is(e.target) || !$('.select').has(e.target)){ // check if the click is inside a div or outside
$('.hide').slideUp(200); // if it is outside then hide all of them
}
});
});
you can define your notClick() function as below:
$.fn.notClicked= function(clickPosition){
if (!$(this).is(clickPosition.target) && $(this).has(clickPosition.target).length === 0){
return true;
}
else{
return false;
}
};
and then use it as:
$(document).click(function(e){
alert($('.select').notClick(e)); // will return true if it is not clicked, and false if clicked
});
You need to hide other ul whenever some one clicks on .select div.
Here is a working fiddle: http://jsfiddle.net/0mgbsa0b/1/
$(document).ready(function() {
$('.hide').each(function() {
$(this).hide();
});
$('.select').click(function() {
$('.hide').each(function() {
$(this).hide();
});
var id = '#' + $(this).attr('id');
var sub = id + '_sub';
$(sub).slideToggle();
});
$('body').mouseup(function() {
if($(this).length == 0) {
$(this).hide();
}
});
});
I'm interested in two concerns you raised, so i will be trying to share some ideas on them:
1）So I wonder if jquery support some function such as 'not click'?
personally, to quesiton1
i think there is no jQuery event method called .noclick()
PPL often use addClass & removeClass to log whether an element got clicked and after marking the element with class="active" , using jQuery selector to select ".active" or using jQuery ":not" selector to select elements that are not marked ".active" ( indirectly finding out those unclicked.)
3.You might also need to count in click propagation issues. meaning sometimes you click a children container and triggered click event towards all its parent inside.
fiddle link: `http://jsfiddle.net/hahatey/ctp5jngf/2/`
In the above case , if you clicked child box in red, will by default alert1, alert2 if
you didn't apply a e.stopPropagation() to the click event;
2) I want to hide all the ul when the mouse is click outside. I did some research, and see other people use mouseup or click on body. But I am not quiet sure how it works.
for question 2:
could be many many ways to do it, you can try blur() //lose focus event trigger.
like what you mentioned mouseout, mouseup, add click event listener to outer area all will work for it as long as u can use method in answer1. i see other ppl have posted many answers already as it can be done in many ways.
I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});
Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.
http://jsfiddle.net/5nB4P/
HTML:
<div id="nav">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>
Script:
$(function() {
$("li :eq(0)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:gt(0)").hide();
$(".tabs:eq(0)").show();
})
$("li :eq(1)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(this).css("background","red")
$(".tabs:gt(1), .tabs:lt(1)").hide();
$(".tabs:eq(1)").show();
})
$("li :eq(2)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:lt(2)").hide();
$(".tabs:eq(2)").show();
})
})
There is a much better way to achieve this. Here you go
$(function() {
$("li").click(function() {
$(this).css("background","red").siblings().css("background","none");
$(".tabs").hide().eq($(this).index()).show();
return false;
});
})
Working Demo
As #Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.
FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements
CSS:
.active {
background-color:red;
}
JQuery:
$('li').click(function(){
$this = $(this);
$this.addClass('active').siblings().removeClass('active');
$('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});
Here is a demo: http://jsfiddle.net/5nB4P/6/
Here is the way that I updated this to make it smaller and I believe to be more effective and easier to use:
http://jsfiddle.net/5nB4P/7/
Code:
$("#nav ul li").click(function(){
var id = $(this).attr("rel");
$("#nav ul li").each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
$("#content div").each(function(){
$(this).hide();
});
$("#"+id).show();
});
Do you mean this? http://jsfiddle.net/tsukasa1989/5nB4P/1/
$(function() {
$("#nav li").click(function(){
// Handle active status
$(this).addClass("active").siblings().removeClass("active");
// Show the tab at the index of the LI
$(".tabs").hide().eq($(this).index()).show();
})
// Don't forget to set first tab as active one at start
.eq(0).addClass("active");
})
If you want to style the active tab use
#nav li.active{}
My approach doesn't use arguments, but HTML class and id references to shorten things: http://jsfiddle.net/ZScGF/1/