I'm having an issue with click events on several elements. Each element's click event is supposed to reveal a specific div related to it, but the hidden divs are not appearing when I click on the elements. Any help in figuring out what might be going wrong would be greatly appreciated.
Here is a snippet of the code:
After experimenting with your code, I made some changes by removing all JS and creating a function that hides all elements except the timings of the clicked day. Additionally, I updated the event binding to use the "click" event on your .screening-days li rather than the onclick attribute in the HTML. I also changed the class name from thur-listings to thu-listings for consistency.
$(".screening-days li").click(function(){
$(".screening-days li").removeClass("active");
$(this).addClass("active");
$(".movie-timing").hide();
$("." + $(this).attr("id").substr(0, 3) + "-listings").show();
});
// Automatically open listings for the current day on page load
$(document).ready(function(){
var d = new Date();
var days = ["sun","mon","tue","wed","thu","fri","sat"];
$("#" + days[d.getDay()] + "showtimes").trigger("click");
});.movie-timing {
display: none;
}
.screening-days .active {
color: blue;
}
.screening-days li:hover {
text-decoration: underline;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section class="showtimes">
<ul class="screening-days">
[<li id="dayshowtimes">Day Name</li>] // Sample template for each day
</ul>
<span class="filter">
<p>Filter Films</p>
</span>
</section>
</div>
[... Repeat movie listings for different days ...]
</div>I believe these adjustments align more closely with your desired outcome. Let me know if you have any other requirements or questions.
Additionally, I included the feature to automatically display listings for the current day upon page load as an added convenience.
I believe you may be looking for the incorrect class in your JavaScript script. I suggest that the proper line should read as follows:
if ($(this).hasClass("tue-listings")). heretueTimes, stick with tue-listingsAssign a data-class to each item in the .screening-days list based on the corresponding unordered list, and utilize this JavaScript code for show/hide functionality. While the checkbox hack could be a more efficient solution (look it up), the focus here is on achieving the desired effect using jQuery.
HTML
<li class="active" data-class="mon-listings" id="monshowtimes">Monday</li>
<li id="tueshowtimes" data-class="tue-listings">Tuesday</li>
<li id="wedshowtimes" data-class="wed-listings">Wednesday</li>
<li id="thurshowtimes" data-class="thur-listings">Thursday</li>
<li id="frishowtimes" data-class="fri-listings">Friday</li>
<li id="satshowtimes" data-class="sat-listings">Saturday</li>
<li id="sunshowtimes" data-class="sun-listings">Sunday</li>
CSS
.movie-timing {
display:none;
}
.movie-timing.show {
display:block;
}
JS
$('.screening-days li').click(function(){
$('.screening-days li').removeClass('active');
$(this).addClass('active');
var dataClass = $(this).data('class');
$( '.movie-timing' ).removeClass('show');
$( '.movie-timing.'+dataClass ).addClass('show');
});
Currently, there are two issues existing in the code snippet. To find a general solution, it is advised to explore other answers.
The $(this).hasClass(".tueTimes") class should not require a . when using hasClass to check for it.
I couldn't locate any class named tueTimes. I believe this should be updated to tue-listings.
If these two adjustments are made, it should resolve the problem you are facing.
var showMon = $("#monshowtimes");
var showTue = $("#tueshowtimes");
var showWed = $("#wedshowtimes");
var showThu = $("#thurshowtimes");
var showFri = $("#frishowtimes");
var showSat = $("#satshowtimes");
var showSun = $("#sunshowtimes");
var monTimes = $(".mon-listings");
var tueTimes = $(".tue-listings");
var wedTimes = $(".wed-listings");
var thurTimes = $(".thur-listings");
var friTimes = $(".fri-listings");
var satTimes = $(".sat-listings");
var sunTimes = $(".sun-listings");
$(showTue).click(function() {
$(".screening-days li").removeClass("active");
$(this).addClass("active");
$(".movie-timing").each(function() {
if ($(this).hasClass("tue-listings")) {
$(this).css("display", "block");
} else $(this).css("display", "none");
})
});.mon-listings, .tue-listings, .wed-listings, .thur-listings, .fri-listings, .sat-listings, .sun-listings {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section class="showtimes">
<ul class="screening-days">
<li class="active" id="monshowtimes">Monday</li>
<li id="tueshowtimes">Tuesday</li>
<li id="wedshowtimes">Wednesday</li>
<li id="thurshowtimes">Thursday</li>
<li id="frishowtimes">Friday</li>
<li id="satshowtime...
I've encountered an issue with my apexchart where the data is not displayed when the page loads. It only appears when I zoom in/out or resize the window, which seems odd to me. I came across a similar problem on the apexcharts github, but it doesn&apo ...
Can you help me out? I am trying to figure out how to create an IF...ELSE condition using AngularJS on my index.html file: <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in categories track by $index"> <a href="#/pa ...
Recently, I've been delving into the world of JavaScript and experimenting with the prevent default command for ajax pagination. Here's the code I've come up with: http://jsfiddle.net/6pqfH/2/ $('.pagination').click(function(e){ ...
I'm attempting to recreate a visual effect that is similar to: Specifically, I am trying to achieve a style where the links in the navigation bar change color when the corresponding section is displayed, such as having the gallery link in the navbar ...
I'm facing an issue where my AJAX variable is only updating once by +4 each time a button is pressed. I need assistance on how to make it continuously work. index.php - AJAX <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m ...
I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create ...
Upon editing content and saving changes, instead of displaying my updated content when refreshing the page, it shows [object CSSStyleDeclaration]. function newElement() { let li = document.createElement("li"); let inputvalue = document.querySelector ...
As I embark on creating my very first ReactJS website with Node in the back-end, I encountered an issue in fetching and printing data. While I successfully displayed the names, pictures, and emails of project members from the server, I faced an error when ...
I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...
Just a quick inquiry - what's the best way to pass or return a value from a function? Here is my code: function numberOfDivs(){ var numberOfElements = $("#div").children().length; // Counting the number of existing divs return numberOfElements; } ...
I need help figuring out how to stop the setInterval function when the button is clicked and changes to "STOP." Even though the button toggles between START and STOP, the random background color changes continue relentlessly. $(document).ready(function(){ ...
I'm currently working with Drupal and I'm looking to update a specific field every X seconds without having to refresh the entire page. My current approach involves using the following code: <script> var refreshId = setInterval(function ...
I am encountering an issue with date selection using this input field <mat-form-field class="w-full"> <mat-label>{{ "DATE" | translate }}</mat-label> < ...
I need help with a layout featuring three containers - Total (with a red border), Left (yellow border containing an image), and Right (blue border containing text). Left is set to approximately 30% width with float: left, while Right is set to 70% width w ...
Currently, I am working on a small project using JQuery and facing an issue when trying to remove error classes from HTML elements. To handle the removal of the error classes, I am utilizing $('selector').on('input') event to target th ...
I'm currently developing a text-based game using JavaScript that involves picking up a sword with the help of an in-game function. var takeSword = function() { if (currentRoom.hasSword) { $("<p>You picked up a sword.</p&g ...
I am faced with a situation where I have a set of checkboxes that, due to the integration with another platform, must have individual names even though they are all interconnected. <div class="form-group col-xs-6 checkbox-group"> <label cla ...
Here is a fiddle I created to demonstrate my issue. https://jsfiddle.net/7w3c384f/8/ In the fiddle, you can see that my numbered list has alternating colors achieved through the following jQuery code: $(document).ready(function(){ $("tr:even").css("ba ...
I'm facing a challenge with my script. I have an Array of FlatObj and some rules, and I need to create a converter function that transforms them into TreeObj. The Rules are: If an object has a higher depth, it should be a child of an object with a l ...
I have a very basic angular application. It simply increases the value by 1 when clicked on using ng-click. Take a look at JSFiddle <div ng-app="app" ng-controller="ctrl"> <div ng-click="hello=hello+1">THIS WORKS ON CLICK: {{hello}}</d ...