Toggle active state of two elements via shared data-target attribute - javascript

I am currently using the function below to toggle the class of ".card-header" based on a shared data-target with it's corresponding ".seating-map_section". My hope is to adjust this so that when either the ".seating-map_section" and/or ".card-header" element is clicked, it add/removes the variable activeClass of both elements. I'm not sure what the best approach would be to something like this so any help would be greatly appreciated!
For context, this is the effect I'm going for: https://www.nba.com/timberwolves/tickets/memberships
var $activeItem = $(".seating-map_section");
var activeClass = "active";
$activeItem.click(function() {
const id = $(this).attr('data-target');
const $collapse = $(`.card-header[data-target=${id}]`);
if ($collapse) {
$collapse.toggleClass(activeClass);
}
$(this).toggleClass(activeClass);
});

Please look at the code below. It may work.
Check: http://jsfiddle.net/mehdi354/5yvds8t2/1/

You could do it like this:
var $activeItem = $(".seating-map_section, .card-header");
var activeClass = "active";
$activeItem.click(function() {
const id = $(this).attr('data-target');
const $collapse = $(`.card-header[data-target=${id}], .seating-map_section[data-target=${id}]`);
if ($collapse) {
$collapse.toggleClass(activeClass);
}
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="seating-map_section" data-target="1">
Seating map section
</div>
<div class="card-header" data-target="1">
Card header
</div>

Related

Javascript classList add hidden not working

Below is a snippet of code that gets some elements via the DOM. I just attach a simple onclick which is supposed to add the "hidden" property to the classList of each retrieved element.
HTML:
<body>
<h1 id="view-one-header">Exploring View 1</h1>
<img id ="dragonite" src="https://cdn.bulbagarden.net/upload/8/8b/149Dragonite.png" alt="Dragonite">
<button id="toggle-view-two-btn">Toggle View 2</button>
</body>
Javascript:
window.onload = pageLoad;
function pageLoad() {
let viewOneHeader = document.getElementById("view-one-header");
let dragoniteImg = document.getElementById("dragonite");
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");
toggleViewTwoBtn.onclick = changeToViewTwo;
function changeToViewTwo() {
viewOneHeader.classList.add("hidden");
dragoniteImg.classList.add("hidden");
}
I am trying to debug this script because when the button is clicked, the corresponding views do not disappear. It has been awhile and I am unable to figure out the issue. Any help would be appreciated.
Here I have added some css for the class "hidden". When you click on the element with the id "toggle-view-two-btn" the classes are added.
let viewOneHeader = document.getElementById("view-one-header");
let dragoniteImg = document.getElementById("dragonite");
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");
toggleViewTwoBtn.onclick = changeToViewTwo;
function changeToViewTwo() {
viewOneHeader.classList.add("hidden");
dragoniteImg.classList.add("hidden");
}
.hidden {
display: none;
}
<div id="view-one-header">view-one-header</div>
<div id="dragonite">dragonite</div>
<div id="toggle-view-two-btn">toggle-view-two-btn</div>

jQuery: add multiple data attributes with each click function

I have a click function setup whereby when you click on the .click div, it takes the data-hook attribute, and add it as a data-filter attribute to the .button div, this works fine, but after each click it is replacing the data-filter attribute with the new one, ideally I want to add a new value to the attribute with each click, separating each value with a comma.
Here's a jsFiddle demo: http://jsfiddle.net/neal_fletcher/pSZ2G/
HTML
<div class="button">THIS</div>
<div class="click" data-hook="one">CLICK</div>
<div class="click" data-hook="two">CLICK</div>
<div class="click" data-hook="three">CLICK</div>
<div class="click" data-hook="four">CLICK</div>
<div class="click" data-hook="five">CLICK</div>
jQuery:
$(".click").click(function () {
var thing = $(this).attr("data-hook");
$('.button').attr('data-filter', thing);
});
If this is at all possible? Any suggestions would be greatly appreciated!
You can store the previous value and can concatinate with new clicked value, something like.
$(".click").click(function () {
var thing = $(this).attr("data-hook");
var earData = $('.button').attr('data-filter');
if(typeof earData != 'undefined'){
$('.button').attr('data-filter', earData + ","+thing);
}else{
$('.button').attr('data-filter', thing);
}
});
DEMO
$(".click").click(function () {
var thing = $(this).attr("data-hook");
var prevValue = $('.button').attr('data-filter');
if(prevValue){
$('.button').attr('data-filter', prevValue +','+thing)
}
else{
$('.button').attr('data-filter', thing)
}
});
$(".click").click(function () {
var thing = $(this).attr("data-hook")||'';
var df = $('.button').attr('data-filter')||'';
$('.button').attr('data-filter', df+','+thing)
});
on a side note.. I hope you don't have any other elements with a .button class in it.. if you're looking to update a single target, you should reference by an id attrib instead.

Adding html / css within JavaScript toggle

$(function() {
$('#toggle3').click(function () {
$('.toggle').hide('1000');
$('.toggle').text('I would like to add a navigation menu here'); // <--
$('.toggle').slideToggle('1000');
return false;
});
});
I am wondering the best way to edit the above code snippet to be able to hold HTML / CSS as I plan on calling a custom menu within. I will be using this snippet multiple times and calling multiple menus to trigger with toggle.
If at all possible, try to avoid embedding html on javascript: you're likely to run into escaping issues and multiline strings, and the overall result usually isn't pretty.
You might want to store the HTML on the DOM itself:
<div>
<span class="toggle" data-toggle="foo">Toggle foo</span>
<span class="toggle" data-toggle="bar">Toggle bar</span>
</div>
<div id="navmenu-store">
<div class='navmenu' data-for-toggle="foo">
navmenu "foo"
</div>
<div class='navmenu' data-for-toggle="bar">
navmenu "bar"
</div>
</div>
On the CSS, hide the 'store':
#navmenu-store {
display: none;
}
And then, with javascript, add the navmenus when requested:
$(".toggle").each(function() {
var $toggle = $(this);
var toggleName = $toggle.data("toggle");
var $navmenu = $(".navmenu[data-for-toggle=" + toggleName + "]");
// Store the navmenu on the toggle for later access
$navmenu.remove();
$toggle.data("navmenu", $navmenu);
});
$(".toggle").on("click", function() {
var $toggle = $(this);
var $navmenu = $toggle.data("navmenu");
var isInTheDom = $.contains(document, $navmenu[0]);
if(isInTheDom) {
$navmenu.remove();
} else {
// Here I'm inserting the navmenu after the toggle;
// you can do whatever you want
$navmenu.insertAfter($toggle);
}
});
I've created a very simple jsbin as a proof of concept: http://jsbin.com/OwUWAlu/1/edit

Proper Way to Append Class & AJAX Call

Ok, so I really don't think I'm structuring my JS properly, and am hoping someone can point me in the right direction. I don't think sequentially naming the classes for each list item is an effective, or proper way of accomplishing this.
I have a list of checkboxes that, when clicked, need to perform two actions:
1) Toggle the class name of a div located directly below it.
2) Post via AJAX the state.
Here is my current markup:
<ol class="toolkitList">
<li>
<label><input class="inlineCheckers" type="checkbox" id="checkers" onchange="setCheck();" /><b id="grayTitle">List Title 1</b></label>
<i id="hiddenDiv">Div content can go here.</i>
</li>
<li>
<label><input class="inlineCheckers" type="checkbox" id="checkers2" onchange="setCheck2();" /><b id="grayTitle2">List title 2</b></label>
<i id="hiddenDiv2">Div content can go here.</i>
</li>
<li>
<label><input class="inlineCheckers" type="checkbox" id="checkers3" onchange="setCheck3();" /><b id="grayTitle3">List title 3</b></label>
<i id="hiddenDiv3">Div content can go here.</i>
</li>
<li>
<label><input class="inlineCheckers" type="checkbox" id="checkers4" onchange="setCheck4();" /><b id="grayTitle4">List Title 4</b></label>
<i id="hiddenDiv4">Div content can go here.</i>
</li>
</ol>
Here is my current JS:
function setCheck() {
var el = document.getElementById("checkers");
if (el.checked) {
document.getElementById("hiddenDiv").className = "main";
document.getElementById("grayTitle").className = "titleGray";
} else {
document.getElementById("hiddenDiv").className = "";
document.getElementById("grayTitle").className = "";
}
}
function setCheck2() {
var el2 = document.getElementById("checkers2");
if (el2.checked) {
document.getElementById("hiddenDiv2").className = "main";
document.getElementById("grayTitle2").className = "titleGray";
} else {
document.getElementById("hiddenDiv2").className = "";
document.getElementById("grayTitle2").className = "";
}
}
function setCheck3() {
var el3 = document.getElementById("checkers3");
if (el3.checked) {
document.getElementById("hiddenDiv3").className = "main";
document.getElementById("grayTitle3").className = "titleGray";
} else {
document.getElementById("hiddenDiv3").className = "";
document.getElementById("grayTitle3").className = "";
}
}
function setCheck4() {
var el4 = document.getElementById("checkers4");
if (el4.checked) {
document.getElementById("hiddenDiv4").className = "main";
document.getElementById("grayTitle4").className = "titleGray";
} else {
document.getElementById("hiddenDiv4").className = "";
document.getElementById("grayTitle4").className = "";
}
}
I realize I don't have the AJAX portion of this setup yet, but I wanted to make that requirement known, as I will be adding that part into the code shortly. Thanks for any guidance you can provide!
This is how I would do it:
$toolkitlist.on( 'change', '.inlineCheckers', function () {
$( this ).closest( 'li' ).toggleClass( 'checked', this.checked );
});
where $toolkitlist is a jQuery object containing the OL element. Notice how I set the class on the LI element, because that is the outermost element which represents the checked item. You can use these selectors to style the "checked" states:
/* how they look like initially */
.grayTitle { ... }
.hiddenDiv { ... }
/* how they look like when their check-box is checked */
li.checked .grayTitle { ... }
li.checked .hiddenDiv { ... }
use jQuery's addClass
$('#grayTitle3').addClass('titleGray');
Update, using ^=:
$('[id^=grayTitle]').addClass('titleGray');
You could also apply the class to outer div
CSS:
.selected label b {
color:blue
}
.selected i {
color:red
}
JS:
$(".inlineCheckers").on('click',function(){
$(this).parents("li").toggleClass('selected',$(this).is(":checked"));
})
jsfiddle : http://jsfiddle.net/y2rHF/3/
remove the inline .onchange.. and bind the change event to your class .inlineCheckers - then you can usethis` so you don't have to make multiple functions for each set
$('.inlineCheckers').on('change', function {
$el = $(this);
var $hd = $el.closest('label').next('i');
var $gt = $el.next('b');
$hd.toggleClass('main', $el[0].checked);
$gt.toggleClass('checkers', $el[0].checked);
}
http://jsfiddle.net/KYzgB/

Selecting a single class from a multi class element

I'm trying to select a specific class (in this case page1, page2, page3 etc.)
I've written this code that works fine for a single class, i've tried using .match() to exclude the .plink class picked up in dis but can't get it working.
$(function(){
$("a.plink").click(function() {
var dis = $(this).attr("class"); // This is the problem line, I need it to contain 'page1' ONLY. Not 'page1 plink'.
$("#page1,#page2,#page3").hide();
$("#" + dis).show();
return false;
});
});
The HTML that is associated with this is:
<div id="page-links">
<a class="page1 plink" href="#">About</a>
<a class="page2 plink" href="#">History</a>
<a class="page3 plink" href="#">Backstage</a>
</div>
EDIT:
These are the DIV's being shown and hidden:
<div id="page1">
<?php include_once("page1.php");?>
</div>
<div id="page2">
<?php include_once("page2.php");?>
</div>
<div id="page3">
<?php include_once("page3.php");?>
</div>
Is there a simple way to achieve this without regular expression matching?
$(function(){
var pages = $('div[id^=page]');
$("a.plink").click(function() {
var dis = $(this).attr("class").replace(' plink', '');
pages.hide().filter('#' + dis).show();
return false;
});
});
This should be
$("." + dis).show();
for class and in your example there are all classes.
As you mentioned simple way so it could be
$("a.plink").click(function() {
$(".plink").hide();
$(this).show();
return false;
});
According to your question after edit
$("a.plink").click(function() {
$('div[id^="page"]').not('#page-links').hide();
pid=$(this).attr('class').split(' ')[0];
$('#'+pid).show();
return false;
});
Here is a fiddle.
The JavaScript code is not correct. With the "#" you select ids from the html-element.
As you have only classes, the right way is to do it with "."
So this would be correct:
$(function(){
$("a.plink").click(function() {
var dis = $(this).attr("class");
$(".page1,.page2,.page3").hide();
$("." + dis).show();
return false;
});
});
I didn't test it, but I think you have to change something with the var dis.
If you click on .page1, the variable dis would contain "page1 plink".
$("." + dis).show();
would be
$(".page1 plink").show();
So I recommend to split the two classes, as it should be like
$(".page1 .plink").show();
You are trying to associate functionality of a click by appending classes. It would make more sense to put id of the div you want to show in the href
html:
<div id="page-links">
<a class="plink" href="#page1">About</a>
<a class="plink" href="#page2">History</a>
<a class=" plink" href="#page3">Backstage</a>
</div>
<div id="page1">
Content 1
</div>
<div id="page2">
Content 2
</div>
<div id="page3">
Content 3
</div>
​javascript:
jQuery(function ($) {
var pages = [];
function showPage(page) {
var i;
for(i = 0; i < pages.length; i++)
{
if(page === pages[i]) {
$(pages[i]).show();
} else {
$(pages[i]).hide();
}
}
}
// Store each href in a pages array and add handlers
$('.plink').each( function() {
var page = $(this).attr('href');
pages.push(page);
$(this).attr('href', '#');
$(this).click(function () {
showPage(page);
});
});
// show the first page
if(pages.length > 0) {
showPage(pages[0]);
}
});​
Example:
http://jsfiddle.net/38qLB/
And just so I don't avoid the actual question, which is how do you select a class from a multi class element, you should follow this example of splitting up the class name Get class list for element with jQuery if you truly insist on using classes to make your link/div association
You don't really want to exclude the plink class, because that will bring you confusion and trouble when you need to add another class. Instead you want to extract just the pageX class:
// Regex for extracting pageXX
var reg = /^(.*\s)?(page\d+)([^\d].*)?$/;
dis = reg.exec(dis)[2];
I haven't testet this 100%, but put these two lines in right after var dis = $(this).attr("class"); and you should hopefully be good to go.
i down't know if i get your question right
to get all classes with class plink u can use
var klasses $("a.plink");
now u can loop true the items
var yourClasses = Array();
for(var klass in klasses)
{
var word = klass.attr('class').replace(" plink", "");
yourClasses.push(word);
}
now you have all the classes wich have the class plink
hope this was where u where looking for
If I was just doing a minor tweak to fix your existing structure I would do something like this:
$(document).ready(function() {
$('a.plink').click(function() {
var id = $.trim(this.className.replace('plink', ''));
/*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
$('div.page').hide();
/*otherwise use the version from sheikh*/
//$('div[id^="page"]').not('#page-links').hide();
$('div#' + id).show();
});
});
The main change I would recommend to your existing markup would be to add a common "page" class to each of the page divs. Here is a fiddle
If I was starting on this from scratch I would probably take a slightly different approach in which I define an "active" class and toggle which elements have it rather than using show/hide on the divs. And that would end up looking something like this:
Markup:
<div id="page-links">
<a class="plink active" href="#page1">About</a>
<a class="plink" href="#page2">History</a>
<a class="plink" href="#page3">Backstage</a>
</div>
<div id="page1" class='page active'> </div>
<div id="page2" class='page'> </div>
<div id="page3" class='page'> </div>
CSS:
div.page
{
height: 300px;
display:none;
}
div.page.active
{
display:block;
}
a.plink
{
padding-left:5px;
padding-right:5px;
}
a.plink.active
{
background-color:#ddd;
}
div#page1
{
background-color:blue;
}
div#page2
{
background-color:green;
}
div#page3
{
background-color:red;
}
Script:
$(document).ready(function() {
$('a.plink').click(function() {
var id = $(this).attr('href');
$('.active').removeClass('active');
$(this).addClass('active');
$('div' + id).addClass('active');
});
});
Or the fiddle here.
Oh and to answer the title question rather than just the end behavior described...
var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
if(classes[i].substring(4) === classes[i].replace('page', '')) {
id = classes[i];
break;
}
}
should end up with id containing the "page#" value associated with the link that was clicked regardless of its position in the list of classes.

Categories