I have 5 questions that I want to click through. I only want one question on the page at a time. There are back and next buttons below each question. But the jQuery I have worked on the first question, but fails after that. What am I doing wrong?
HTML
<div id="one">
<span>What is your first name?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="two">
<span>What is your last name?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="three">
<span>How old are you?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="four">
<span>What is your favourite colour?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
jQuery
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#two").hide();
$("#three").hide();
$("#four").hide();
$("#next").click(function () {
$("#one").hide();
$("#two").show();
});
});
$(document).ready(function () {
$("#next").click(function () {
$("#two").hide();
$("#three").show();
});
});
</script>
Your first problem is You cant give same id to your elements. Id is used to make element uniqeu. You can use class for same type elements.
Your second problem is syntax error before a tag elements.
As as way you first can hide all elements using class attribute and show spesific element with id attribute.
$(document).ready(function () {
$(".question").hide();
$("#one").show();
});
function NextBack(id){
$(".question").hide();
$("#"+id).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div id="two"class="question">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div id="three"class="question">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div id="four"class="question">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>
Or you can use dom element to hide and show
$(document).ready(function () {
$(".question").hide();
$("#one").show();
});
$(".back").click(function(e) {
var id=e.target.closest(".question").previousElementSibling.getAttribute("id");
if(id){
$(".question").hide();
$("#"+id).show();
}
});
$(".next").click(function(e) {
var id=e.target.closest(".question").nextElementSibling.getAttribute("id");
if(id){
$(".question").hide();
$("#"+id).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div id="two"class="question">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div id="three"class="question">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div id="four"class="question">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>
The main problem is that you are having multiple elements with the same id, id's should always be unique.
also please note that you forgot the < infront of your links (a)
You can also achieve it in a simple way like this.
$(document).ready(function() {
$(".questiontwo,.questionthree,.questionfour").hide();
$(".next").click(function() {
var current = $(this).closest("[class*=question]");
var next = current.next("[class*=question]");
if (next.length == 1){
current.hide();
next.show();
}
});
});
Demo
$(document).ready(function() {
$(".questiontwo,.questionthree,.questionfour").hide();
$(".next").click(function() {
var current = $(this).closest("[class*=question]");
var next = current.next("[class*=question]");
if (next.length == 1){
current.hide();
next.show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionone">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div class="questiontwo">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div class="questionthree">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div class="questionfour">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
Hi Im having troubles with getting the following to work. Only the first element works, how should I think?
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<script>
$('#tabBtn').on("click",function(){
if ($(this).parent('.hi').css('max-height') == '65px'){
$(this).parent(".hi").addClass('open');
}
else{
$(this).parent(".hi").removeClass('open');
}
})
</script>
Using the same id on multiple elements is invalid, use a class instead:
$('.tabBtn').on("click", function() {
if ($(this).parent('.job').css('max-height') == '65px') {
$(this).parent(".job").addClass('open');
} else {
$(this).parent(".job").removeClass('open');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello</a>
</div>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello2</a>
</div>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello3</a>
</div>
first thing first id attribute should be ONCE per page
having say that all you need to do is work on the on function from the document and in a selecter way like so
$(document).on("click",".tabBtn",function(){
//do work
})
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});
I am trying to add some code to a page that keeps adding <div> sections to a page when a link is clicked. Here's my code:
<script type="text/javascript">
function ShowDiv() {
document.getElementById("show").style.display = "";
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
This works great for one <div> but I need it to keep adding down the page when the link is clicked. I t is going to be used to hold a form with an array of ids for posting to PHP.
You can clone original div (which will be as template) and append cloned one to the page:
Fiddle.
HTML:
<p>
<a id="add" href="#" class="control">Add New</a>
</p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
JS:
$(document).ready(function()
{
var i = 0;
$('#add').click(function()
{
var newEl = $('#show').clone();
newEl.attr('id', "show" + i);
i++;
newEl.show().appendTo("body");
});
});
<script type="text/javascript">
function ShowDiv() {
var a = $("#show").clone(true); // clones element
$(".test").append(a); // appends to parent
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div class="test"> <!-- defines parent for simple selection -->
<div id="show"> <!-- element to clone -->
<p>This is the div!</p>
</div>
</div>
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.