Changing CSS for specific "id" using "this" in jQuery - javascript

My main goal is to have the user click on any "nav" class item and display a certain paragraph ID based on which nav class was clicked. I can add the .css to this post if needed but the main thing is each paragraph ID has "display" none".
Here's the "nav" items.
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
Here's my paragraph items which uses an ID of the nav ID's plus the number 1 which I figured was easiest when using jQuery as you'll see below in my jQuery code.
<p id="home1">Home text</p>
<p id="store1">Store text</p>
This is my jQuery code which when using "alert(changeCSS)" shows the correct ID ("ID" plus the number 1).
<script type="text/javascript">
$(".nav").click(function() {
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).css('display', 'block');
});
</script>
I'm new to jQuery and programming in general so it maybe something simple I hope. Let me know if you have any suggestions. Thanks!

You are not adding # for the id selector:
$('#' + changeCSS)

Also consider the built-in jQuery effects .hide() and .show().
In your case it would be something like this:
$(".nav").click(function(){
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).show();
});
This way you can easily control the speed at which your div appears or disappears:
$(changeCSS).hide(1000); //takes a second

$('.nav').click(function(event){
var tag = $(event.target);
var id= '#' + tag.attr('id') + '1';
$(id).css('display','block')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
<p id="home1" style="display:none">this is the home paragraph</p>
<p id="store1" style="display:none">this is the store paragraph</p>

Related

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

Executing a condition if either item is clicked

I have the following function:
$('.card1').click(function(){
// ...
});
I want to avoid repetition and would want this function to execute for any of the following selectors: $('.card1'), $('.card2'), $('.card3'), $('.card4'), $('.card5'), $('.card6'), $('.card7'), $('.card8')
Maybe have an if condition, where if this is clicked or that, but not sure.
You should convert those classes to id or ad id for those tags then easily you can find which tag is clicked you can see example here
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var cardnumber = ["#card1", "#card2", "#card3", "#card4", "#card5"];
$("#card1, #card2, #card3, #card4, #card5").click(function() {
var y = cardnumber.indexOf("#" + this.id);
alert(y);
});
});
</script>
</head>
<body>
<p id="card1">Click me!</p>
<p id="card2">Click me!</p>
<p id="card3">Click me!</p>
<p id="card4">Click me!</p>
<p id="card5">Click me!</p>
</body>
</html>
Either use a common class for all the elements :
$('.card')
or make a group selector:
$('.card1, .card2....n')
You can try to match elements that have class 'card' starts with 'card', like this $("div[class^='card'],div[class*=' card']").click(function(){...});
Try using Attribute Starts With Selector [name^="value"]
$("[class^=card]").click(function() {})
better to introduce a new css class for the click
CSS
/*all cards*/
.card {...}
/*personalized cards*/
.card1 {...}
.card2 {...}
.....ect
javascript
$('.card').click(function(){
// ...
});
html
<div class="card card1">card1</div>
<div class="card card2">card2</div>
<div class="card card3">card3</div>
<div class="card card4">card4</div>
Hope that makes sense to you or at least gives you ideas.
You would then made the specify class --> ids depending on whether they are repeated or not.
<div id="card1" class="card">card1</div>
<div id="card2" class="card>card2</div>
<div id="card3" class="card">card3</div>
<div id="card4" class="card">card4</div>
you would then need to change the CSS to accommodate this change.
Then you would get the card number by asking for the Id in the javascript.
javascript
$('.card').click(function(){
var $this = $("this");
var cardId = $this.attr("id");
if(cardid == "card1") {
//your code
} else if(cardid == "card2") {
//your code
}
});

How to show only divs which dynamic attribute match

I may be close but since apparently nobody asked something like this, perhaps I may ask with the wrong wording.
I have a tabber with categorys which are dynamic and fancy box-galleys which also have dynamic attributes (shown here as divs with the attribute lala="xyz"). So how can I show on click on the tabber (here as first and last buttons) only the matching gallerys (in my code the first two or the last two divs should diapear)?
NOTE: the attributes are not predictable.
My html:
<div class="wrap">
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 1</p>
</div>
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 2</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 3</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 4</p>
</div>
</div>
<div class="showall">Show all</div>
<br>
<div class="mybutton" lala="ui">SHOW ONLY UI</div>
<div class="mybutton" lala="uibui">SHOW ONLY UIBUI</div>
And my jquery:
jQuery(function ($) {
$('.showall').click(function() {
$('.box').show();
});
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not([myattr = "lala"]).hide();
});
});
Thanks in advance!
Inject your attribute into a attribute selector so that the end result looks like
not('[lala="uibui"]')
e.g.
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not('[lala="' + myattr + '"]').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/
It can be simplified to just
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$('.box:not([lala="' + myattr + '"])').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/2/
Or even down to this (but now less readable):
$('.mybutton').click(function () {
$('.box:not([lala="' + $(this).attr('lala') + '"])').hide();
});
Try this:
$(".box").not('[lala = "'+myattr+'"]').hide();

hide all but one element of certain class in Jquery

I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});
Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});
Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/
Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example

Replace the same class div and has no ID

I have four DIVS, one is ready and the other three are still hidden. When the link to the second div is pressed, I want the second div to show up, and so for the next link.
The problem is, all the four DIV doesn't have ID and has the same class.
I just want it to automatically run without knowing what is the ID and the class of the div, or anything inside the div. It may look like a slideshow but on click function.
<p> link to the ready div </P>
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>
<div id="wrapper">
<div> this is the div that is ready. This div has no ID and has the same class with others <div>
<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>
</div>
FIDDLE
i have made a fiddle that might suite your case please have a look. You can make some modifications according to your needs.
var currentDiv = 0;
$(document).ready(function(){
$(".container div").click(function(){
$(".container div").eq(currentDiv+1).css( "display", "block" );
currentDiv++;
})
});
JSFIddle Link
Im pretty sure this is what you are looking for.
jQuery
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
So what we are doing is getting the index for the link pressed and then using that to select the div we want to show (this is using :nth-child()).
Note: I have put a container around the links so you it doesn't pick up every p on the page.
If you want only one at a time you can just set them all to hide before showing one.
jQuery:
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div").hide();
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
JS FIDDLE DEMO
Explanation
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2</a>
<a idx="3">3</a>
<a idx="4">4</a>
</div>
$('.buttons a').click(
function(event)
{
var idx = $(event.target).attr('idx');
$('.div').hide(); //Hides all the divs
$('.parentDiv div:nth-child('+idx+')').show(); // Shows required div
}
);
DISADVANTAGE
If you will insert more contents, there is more work. Else no problem..
If you insert a div , you have to change all the links.
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2.0 Inserted Div</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2.0</a>
<a idx="3">2</a>
<a idx="4">3</a>
<a idx="5">4</a>
</div>
Not here , All the idx has to be changed. Since my code uses nth-child property
Edited
Updated Fiddle
Another Update

Categories

Resources