sorry for the title, I don't know how I should have said it better (my brain is currently melting because of this problem I can't solve).
Here's a description of my problem:
At first I have one div with a list of names in it:
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
When I click on a name in this div, a second div box (#objekt2) pops up, with more information about the person I clicked on. In this div box there may be a link to even more details, if you click this #objekt3 (new div box) should pop up.
If I already clicked on the link in #objekt1 and click it again, there shouldn't be any more div added, same goes for #objekt2.
Now I've tried it using jQuery, sadly it doesn't work the way it should. If I click the link in #Objekt1 2 times, 2 divs will be added. If I click the link in #Objekt2 no div is added.
Here's my jQuery code for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
function checkDiv(){
var anzahlDiv = $("div").length;
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('<div id="objekt3">testlink #2</div>' ).insertAfter("#objekt2");
}else{
return;
}
exit;
}
$('#objekt1 ul li a, #objekt2 a').click(function () {
checkDiv();
});
Is there anyone here who could help me out on this one please? :(
I would do it by adding some data attributes to the html, and then process those with generalized javascript. It's more readable, and no need to modify code if the data changes.
Basically I added a data-show attribute to the links, which is a comma separated list of the div ids that needs to be visible when the link has been clicked.
HTML:
<div id="objekt1">
<ul id="listeNamen">
<li>John</li>
<li>Mary</li>
</ul>
</div>
<div id="john-info" class="infodiv">
Info about John.
More info
</div>
<div id="john-moreinfo" class="infodiv">
More info about John.
</div>
<div id="mary-info" class="infodiv">
Info about Mary.
More info
</div>
<div id="mary-moreinfo" class="infodiv">
More info about Mary.
</div>
CSS:
.infodiv {
display: none;
}
JS:
$("body").on("click", ".infolink", function (event) {
var dataShow = $(this).attr("data-show").split(",");
$(".infodiv").each(function (index, div) {
var divId = $(div).attr("id"),
visible = dataShow.indexOf(divId) !== -1;
$(div).toggle(visible);
});
event.preventDefault();
});
Here is a working demo jsfiddle.
Since you want different actions for different objects you should have differnet functions e.g.:
....
//Based on your curent code
function for_objekt1()
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('objekt2').remove();
if (anzahlDiv == 3){
$('objekt3').remove();
...
}
}
...
or something similar
Incase if you have fewer divs to show then you can do like this
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
<div id="test"></div>
<script type="text/javascript">
function first(){
$('#test').html("");
$('#test').html('or any thing you want');
}
function second(){
$('#test').html("");
$("#test").html("other thing you want"
)};
</script>
In case you have dynamic content the you can create a single function and pass its id the function and change the content of the div as you would like. It may not solve the problem but hope it would be helpful enough :)
Related
I was just assigned my first project for work and am having some trouble with the last details.
Essentially, when a user clicks a list item in a class of "answerPick" is added to the li. When the user clicks another li item to change their answer the class of "answerPick" is removed from the first choice and added to the new choice. At the end of the form, the user submits and I take all values attached to li items with a class of "answerPick".
Here is an example of the structure of one of the form questions:
<!--Section B-->
<section id="section-b" class="grid">
<div class="content-wrap">
<div class="section-question">
<img src="/Images/modules/GiftThemeHeader_418x50.jpg">
</div>
<ul class="answer-options-grid">
<li class="answer" data-url="relaxation"><img src="/Images/modules/Relaxation_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Relaxation</li>
<li class="answer" data-url="skincare"><img src="/Images/modules/BodyCare_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Body Care</li>
<li class="answer" data-url="date-night"><img src="/Images/modules/DateNight_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Date Night</li>
<li class="answer" data-url="at-home-spa"><img src="/Images/modules/Spa_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">At-home spa </li>
</ul>
</div>
</section>
You'll notice I have an image called "Check1Mobile" right next to the selected image. This image is automatically hidden via .hide().
Basically what I'm trying to do is have the check image show using .show(), when the li item is clicked and is given the class "answerPick". I'm trying to only target specific instances of the class "topimg" during the click function because I use that image/class for each of the form questions.
Here is a snippet of code. I can include everything but I am a javascript scrub so it is messy, to be honest.
$jq('.answer img').click(function () {
if ((this).parent().hasClass('answerPick')) {
$jq('.topimg').show();
}
else {
$jq('.topimg').hide();
} });
Based on the piece of code you have written it should be:
$jq('.answer img').click(function () {
$jq('.topimg').hide()
if ($jq(this).parent().hasClass('answerPick')) {
$jq(this)('.topimg').show();
}
});
But I can also suggest :
$jq('.answer img').on('click', function () {
const el = $jq(this)
el.parent().find('.topimg')
el.find('.topimg').toggle(el.hasClass('answerPick'))
});
Here's a jsfiddle for live example.
I want, when a CATEGORY is active, for the .closeorshow div to be hidden. If no category is selected, the .closeorshow div should be shown.
I tested a bit with $(".closeorshow").hide() and .show(), but I am a jQuery beginner and I couldn't figure it out. The problem seems to be that the .closeorshow div reappears whenever I unselect any category, instead of when no categories are selected.
Here's a fiddle.
HTML:
<ul class="types">
<li class="item" data-target="games">Games</li>
<li class="item" data-target="music">Music</li>
<li class="item" data-target="movies">Movies</li>
<li class="item" data-target="ljudobild">Ljud & Bild</li>
</ul>
<div class="description" id="games">Description of Games</div>
<div class="description" id="music">Description of Music</div>
<div class="description" id="movies">Description of Movies</div>
<div class="description" id="ljudobild">Description of Television</div>
<br><br>
<div class="closeorshow">
This class are going to be SHOWN when NONE of the items are selected, and HIDED
when one of the items is selected.
</div>
JS:
$(document).ready( function() {
$('.types li').click( function(t) {
$('.closeorshow').hide();
if ($(this).hasClass('active')) {
$(this).removeClass('active');$(this).addClass('item');
$('.closeorshow').show();
} else {
$(this).addClass('active');$(this).removeClass('item');
}
$('#'+$(this).attr('data-target')).toggle();
});
});
The basic idea is to check whether the class .active exists. This is done by calling $(".active"), which will produce an array, meaning it has access to the .length method. If the length of the array is greater than 0, you don't want to show .closeorshow, so call $(".closeorshow").hide(). Otherwise, you do want it shown, so call $("#.closeorshow").show().
Tell me if everything isn't bueno.
fiddle
I only changed your JavaScript:
$(document).ready(function () {
$('.types li').on("click", function () {
$(this).toggleClass("active item");
$('#' + $(this).attr("data-target")).toggle();
if ($(".active").length === 0)
$(".closeorshow").show();
else
$(".closeorshow").hide();
});
});
Here's the fiddle made originally to demonstrate the same concept. Only keeping for reference since it's simpler than your problem, but nevertheless demonstrates how to fix the problem in question.
I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.
I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual span.
My example:
<ul>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<span class="label studio-art">studio art</span>
<span class="label ceramics">ceramics</span>
</div>
</div>
</div>
</li>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
<div class="row-section">
<div class="row-heading">ceramics</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
</div>
</li>
</ul>
If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:
$(document).ready(function(){
$("span.label.studio-art").click(function(){
$(".row-section.studio-art").toggle();
});
$("span.label.ceramics").click(function(){
$(".row-section.ceramics").toggle();
});
});
Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/
But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.
So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.
Thank you for any help in advance.
You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.
$(document).ready(function(){
$(".row-section span").click(function(){
var clickedText = $(this).text();
$(".row-section").filter(function(){
return $(this).find("div").text() === clickedText;
}).toggle();
});
});
Updated fiddle: http://jsfiddle.net/6qLX7/2/
.filter documentation: http://api.jquery.com/filter/
I didn't test this, but it should work.
$(document).ready(function(){
$("span.label").click(function(){
var checkText = $(this).html();
$( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
// This checks for exact match. If you want any "containing" match, remove the if-clause
if($(element).html() == checkText) {
$(element).toggle();
}
});
});
});
Let me know if this helps. P.S.! This function IS case-sensitive (see http://api.jquery.com/contains-selector/ for more details.)
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
Ok, lets see if I can explain this clearly enough here.
My HTML looks like
<li>
<div class="info_left" rel="snack">Fries</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="lunch">Burger</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="4thmeal">Taco</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
If you will note you will see a "Remove" and "Favorite" inside a div "info_right". What I need to do when either one of those 2 options is clicked on is get the rel and text values of the same li's "info_left" div. I've tried a few ways but don't think I'm nailing the combo between parent(s), siblings correctly or I dunno. Either way hoping someone can toss me a bone.
It should just be:
$('.info_remove,.info_favorite').on('click', function() {
var $left = $(this).parent().siblings('.info_left');
var rel = $left.attr('rel');
var txt = $left.text();
...
});
jsFiddle example
$(document).ready(function(){
$(".info_right span").click(function(){
$("#msg").html($(this).attr("class")+": "+$(this).parent().prev().attr("rel"));
})
})
try this
$('.info_remove,.info_favorite').click(function() {
var target_elem = $(this).parent().prev();
alert(target_elem.attr('rel'));
alert(target_elem.text());
});
fiddle : http://jsfiddle.net/ss37P/1/