I want to develop a web application where you can specify a question and then provide a choice of multiple answers. I require extra answer 'boxes' to be added when the plus button is clicked, but only added to the specific formRow (see code).
I have tried the JQuery last function but it will always add after the answer box with id=4.
HTML:
<div class="formRow">
<img src="images/icons/color/cross.png" alt="" />
<label>Multiple Choice: </label>
<div class="formRight" style="height:28px;">Question1: <input type="text" class="MCQuestion" QID="'+QID+'" /><img src="images/icons/color/plus.png" alt="" /></div>
<div class="formRight MCAns" id="1">Answer 1: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="formRight MCAns" id="2">Answer 2: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="clear"></div>
</div>
<div class="formRow">
<img src="images/icons/color/cross.png" alt="" />
<label>Multiple Choice2: </label>
<div class="formRight" style="height:28px;">Question2: <input type="text" class="MCQuestion" QID="'+QID+'" /><img src="images/icons/color/plus.png" alt="" /></div>
<div class="formRight MCAns" id="3">Answer 1: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="formRight MCAns" id="4">Answer 2: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="clear"></div>
</div>
Javascript
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$(".MCAns").last().after("New Answer Optition"); //Tried this first
$(".MCAns :last-child").after("New Answer Optition"); //Then this
});
});
Use this :
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$(this).closest('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});
The probleme with your code is that you are selecting every MCAns and take the last one. You should take the last of .formRow add button you clicked.
Use that code:
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});
Check jsfiddle
You can try to get the container formRow first, then you can add as many tags as you want.
Here is the code:
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
var parent = $(this).parents('.formRow'); // Find the container .formRow first
parent.find('.MCAns:last').after("New Answer Optition"); // Add new content after last one
});
});
Related
I know this question has been asked before — I've truly done my best to try to make use of the responses — but I just cannot for the life of me figure out how to map the responses onto my own code. (Relatively new to coding, so I am having difficulty reverse-engineering the responses to code that is quite different from my own.)
I'm trying to fade between image1 and image2 on load, but I keep getting the white space in between.
https://jsfiddle.net/68xsn01r/4/
<div id="container1" class="container">
<img class="image1" src="https://i.imgur.com/XJZvyAh.jpg" alt="Mandarinazul" width="100%" height="100%" />
<img class="image2" src="https://i.imgur.com/7iOp5Xc.jpg" alt="Mandarinazul" width="100%" height="100%" />
<span id="wrapper">
→
</span>
</div>
JQuery:
$("#container1").fadeIn("fast",function(){
$(".image2").fadeIn("slow", function(){
$(".image1").fadeIn("slow", function(){
});
});
});
I am trying to work this out as part of a project. What changes do I need to make to my JS Fiddle?
Use On click function jquery and then use Radio button to select the image so that on click radio button according to selected radio button jquery fade in or out the image.
<div class="color-choose">
<div>
<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>
</div>
<div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
and images are look like this
<div class="left-column">
<img data-image="black" src="abc.jpg"
alt="">
<img data-image="blue" src="abd.jpg" alt="">
<img data-image="red" class="active" src="abs.jpg" alt="">
and script
<script>
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var headphonesColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + headphonesColor +
']').addClass('active');
$(this).addClass('active');
});
});
</script>
and use jquery cdn too
I am currently trying to make a script that will hide/show divs right under inputs. At the moment, I am targeting every single inputs and every single divs by ID (which I find might be a bit heavy, instead of targeting divs relatively to the input position).
So right now it looks a bit like this :
jQuery(document).ready(function(){
jQuery('#inputbutton1').on('click', function(event) {
jQuery('#divtarget1').toggle('show');
});
});
jQuery(document).ready(function(){
jQuery('#inputbutton2').on('click', function(event) {
jQuery('#divtarget2').toggle('show');
});
});
and so on. Is there a way I could take, say, the event.target and from there, reach the div relative to that input button. So that way I would have a single script with variable values rather than 30 scripts with unique ID selectors. Each input button/div combos come as follows (They are scattered through the page, but always come in pairs.) :
<div class="hideshowdiv"><input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'></div>
<div id="divtarget1" class="spellimg"><img src="image.jpg" alt="Image"></div>
Thanks in advance.
Use following code. It's flexible and will work for every new image you add.
$(document).ready(function() {
$('input').on('click', function(event) {
$(this).parent().next().toggle('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
I want to change image source in innerHtml data when the submit button is clicked.
<div id="areaEditor">
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="one.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="two.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="three.jpg"/>
</div>
</div>
$('#newsButton').click(function(e){
e.preventDefault();
alert("klik");
var source = $(".holder").find(".filesss").val();
var imageTag = $(".holder").find("img").attr("src",source);
var htmlData = $("#areaEditor").html();
alert(htmlData);
})
However, the htmlData I alert there only shows me that the img src for the all three image tags is one.jpg.
How to make it corrects so that the image src is based on each the closest input file there?
Many thanks for the help.
You have many .holder elements, you should loop them and get the .filesss value for each one and replace the image src as follows:
$('#newsButton').click(function(e){
e.preventDefault();
alert("klik");
$(".holder").each(function() {
var source = $(this).find(".filesss").val();
$(this).find("img").attr("src", source);
});
var htmlData = $("#areaEditor").html();
})
The idea is to loop over the elements so it can take a single value each time, in your case; you are telling JQuery to get the source from the class holder which it finds it in the first element, so it does not need to look for anything else.
So you can do something like:
<div id="areaEditor">
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="one.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="two.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="three.jpg"/>
</div>
</div>
<script>
$('#newsButton').click(function(e){
e.preventDefault();
alert("klik");
$(".holder").each(function() {
var source = $(this).find(".filesss").val();
$(this).find("img").attr("src",source);
});
var htmlData = $("#areaEditor").html();
alert(htmlData);
})
</script>
I have three divs, each containing multiple images.
There are also three buttons on the page.
I would like to create an effect where clicking on each button fades in the corresponding div and fades out the other two divs.
I have tried to follow code posted previously for similar effects, but have been unsuccessful and am hoping for some help from those who have more skill than I do! Thanks, Ross
The HTML is as follows;
<div id="GROUP-Join">
<img class="CentreBox" src="images/CentreBox.png"
width="487" height="173">
<img id="TitleOne" src="images/TitleOne.png"
width="339" height="19">
<img id="TitleTwo" src="images/TitleTwo.png"
width="143" height="14">
<body onLoad="focus();signup.email.focus()"></body>
<form method="post" name="signup" action="signup.php">
<input id="EmailAddress" type="text" name="email"
placeholder="e-mail" style="color: #000000;
font-family: 'Arial'; font-size: 20px; background-color:transparent;
border:hidden;" size="24" maxlength="49">
<input id="Go" type="image" name="submit" src="images/Go.png"
alt="submit" value="GO">
</form>
</div>
<div id="GROUP-About">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="AboutHead" src="images/AboutHead.png"
width="132" height="19">
<img id="JumpAround" src="images/JumpAround.png"
width="379" height="33">
<img id="Win" src="images/Win.png"
width="254" height="15">
</div>
<div id="GROUP-Contact">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="ContactHeading" src="images/ContactHead.png"
width="124" height="19">
<img id="Email" src="images/e-mail.png"
width="24" height="17">
<img id="Twitter" src="images/tw.png"
width="24" height="20">
<img id="fb" src="images/fb.png"
width="10" height="21">
</div>
<button id="button1">Join</button>
<button id="button2">About</button>
<button id="button3">Contact</button>
I'm not sure this is what you're meaning, but this will fade in each corresponding div and fade out the other two.
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
$('#div1').fadeIn();
$('#div2').fadeOut();
$('#div3').fadeOut();
});
$('#btn2').click(function () {
$('#div1').fadeOut();
$('#div2').fadeIn();
$('#div3').fadeOut();
});
$('#btn3').click(function () {
$('#div1').fadeOut();
$('#div2').fadeOut();
$('#div3').fadeIn();
});
});
</script>
And the markup:
<div>
<div id="div1">
hello
</div>
<div id="div2">
hello 2
</div>
<div id="div3">
hello 3
</div>
<div>
<input type="button" id="btn1" />
<input type="button" id="btn2" />
<input type="button" id="btn3" />
</div>
</div>
The jquery fadeIn and fadeOut functions also have callbacks, so you could also do:
$('#div2').fadeOut(100,
function() { $('#div3').fadeOut(100,
function() { $('#div1').fadeIn(100);
});
});
Check this FIDDLE
This script should get the work done for you
$(function(){
$('button').on('click', function() {
var btnText = $(this).text();
$('div').fadeOut('slow');
$('#GROUP-'+btnText).fadeIn('slow');
});
});
When you run an effect in jQuery such as fadeIn, you can provide a callback so that you can perform actions once that effect has completed. For instance, in your case:
$('#button1').click(function() {
$('#GROUP-Contact').fadeOut(500);
$('#GROUP-About').fadeOut(500, function() {
$('#GROUP-Join').fadeIn(500);
});
});
This is my best guess of what you are looking for without seeing any JS code.
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});