i have div like this use javascript :
<script>
$(document).ready(function(){
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
$("#btnmsg-2").click(function(){
$(".msgid-2").show();
});
$("#btnmsg-3").click(function(){
$(".msgid-3").show();
});
$("#btnmsg-4").click(function(){
$(".msgid-4").show();
});
});
</script>
<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
<div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
<div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
<div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
<div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
if i click button id="btnmsg-1" then div class="msgid-1" show, and then i click button id="btnmsg-3" then div class="msgid-3" show but div class="msgid-1" not hide or close,my question how hide the div if another div is open?
Instead of using separate handlers for each, you can use the related positioning of the elements along with classes to group them to show/hide
ie, Add a class like btnmsg to all the buttons and msgedit to all the div's that have to be shown/hidden. Now register a click handler to .btnmsg elements, from your markup the .msgedit element to be shown is the next sibling of the clicked button so show that then hide all other .msgedit elements.
$(document).ready(function() {
var $edits = $('.msgedit')
$(".btnmsg").click(function() {
var $this = $(this).parent().next().show();
$edits.not($this).hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
<button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
<button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
<button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
<button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
Please add same classes to similar elements, and then use this jQuery code instead:
$(document).ready(function(){
$(".btnmsg").click(function(){
$(".msgid").hide();
$(this).parent().next(".msgid").show();
});
});
See the complete DEMO working: https://jsfiddle.net/lmgonzalves/n5f78kqs/
jsBin demo
don't use msgid-1, msgid-2 etc... cause it defeats the purpose of classNames. Use only msg
Same goes for your buttons. Remove the buttons IDs. use Class class="btn"
Don't use inline styles. Use <style> instead or call-to an external stylesheet.
HTML
<div class="btn">
NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send">
</div>
CSS:
.msg{
display:none;
}
See how more readable is now your code?
jQuery:
var $msg = $(".msg"); // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
$msg.hide(); // Hide all
$(e.delegateTarget).next().show(); // Show next
});
You can do this by calling hide() on the elements you would like to hide.
For example, you would make the following change:
// Old
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
//New
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
$(".msgid-2").hide();
$(".msgid-3").hide();
$(".msgid-4").hide();
});
A cleaner way to do this would be to give all of your messages a "message" class, then your onClick handlers would look like this:
$("#btnmsg-1").click(function(){
$("#message").hide();
$(".msgid-1").show();
});
Hope that helps!
Related
I'm editing woocomerce plugin. I want to create quantity button that will change nearest product quantities when click.
<div class='product-1'>
<div class='changeQtyButton'>
<button class='buttonNumber'>1</button>
<button class='buttonNumber'>2</button>
<button class='buttonNumber'>3</button>
<div>
<div class='quantity'>
<input class='quantityInput-1'>
<div>
</div>
<div class='product-2'>
<div class='changeQtyButton'>
<button class='buttonNumber'>1</button>
<button class='buttonNumber'>2</button>
<button class='buttonNumber'>3</button>
<div>
<div class='quantity'>
<input class='quantityInput-2'>
<div>
</div>
<script>
jQuery('button').on('click', function(){
//inputQty = jQuery(this).next('input').attr('name') ;
test = jQuery(this).closest( "div.changeQtyButton" ).find("input[name=''quantity]").val();
console.log(test);
});
</script>
So how can I select the nearest input when click the button?
You need to go one level up, find next element and input inside.
$('button').on('click', function() {
$(this).parent().next().find('input')
})
.parent() is .changeQtyButton
.next() is .quantity
Or
$(this).closest('[class^=product-]').find('input')
I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content...
code-
<div class="col-sm-3">
<div class="btn-group-vertical" style="padding-top:12px;">
<button type="button" class="btn btn-warning" id="btn1">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4">Btn4</button>
</div>
</div>
<div id="content" class="col-sm-9">
<div id="pilot" style="display:block;">
<p>Name1</p>
<h4>my name is A..........</h4>
</div>
<div id="design" style="display:block;">
<p>Name2</p>
<h4>my name is A..........</h4>
</div>
<div id="instrument" style="display:block;">
<p>Name3</p>
<h4>my name is A..........</h4>
</div>
<div id="innovations" style="display:block;">
<p>Name4</p>
<h4>my name is A..........</h4>
</div>
</div>
I have tried two jquery scripts but not worked as per my requirement...
script1-
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#pilot").css("display","block");
}
$("#btn2").click(function(){
$("#pilot").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#design").css("display","block");
}
$("#btn3").click(function(){
$("#design").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","none");
$("#instrument").css("display","block");
}
$("#btn4").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","block");
}
}
script2-
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").replaceWith( $("#pilot").show() );
$("#instrument").replaceWith( $("#pilot").show() );
$("#innovations").replaceWith( $("#pilot").show() );
}
$("#btn2").click(function(){
$("#pilot").replaceWith( $("#design").show() );
$("#instrument").replaceWith( $("#design").show() );
$("#innovations").replaceWith( $("#design").show() );
}
$("#btn3").click(function(){
$("#design").replaceWith( $("#instrument").show() );
$("#pilot").replaceWith( $("#instrument").show() );
$("#innovations").replaceWith( $("#instrument").show() );
}
$("#btn4").click(function(){
$("#design").replaceWith( $("#innovations").show() );
$("#instrument").replaceWith( $("#innovations").show() );
$("#pilot").replaceWith( $("#innovations").show() );
}
}
</script>
so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx
Your first code example doesn't work as you haven't closed the braces and brackets correctly. Here's a working version: jsFiddle. Your second code example is using an entirely wrong approach.
That being said, by using DRY principles you can massively reduce the amount of JS code required to achieve this.
Firstly, add a data-* attribute to your .btn elements which can be used to identify the div to be shown when the button is clicked:
<button type="button" class="btn btn-warning" id="btn1" data-target="pilot">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2" data-target="design">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3" data-target="instrument">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4" data-target="innovations">Btn4</button>
Then in your JS code you can write a single click handler which works for all buttons:
$('.btn').click(function() {
$('#content div').hide();
var target = '#' + $(this).data('target');
$(target).show();
})
Working example
Associate the target div's with the buttons using data-attributes. Now, on every click you can get the target value from that data-attribute and then use that to select only that div, that you need to show. You should hide all div's before showing the one that needs to be shown.
<a id="btn1" href="#" data-target="design">button 1</a>
<a id="btn2" href="#" data-target="pilot">button 2</a>
<a id="btn3" href="#" data-target="instrument">button 3</a>
<div id="design-div" class="targetdivs">Design</div>
<div id="pilot-div" class="targetdivs">Pilot</div>
<div id="instrument-div" class="targetdivs">Instrument</div>
<script>
$("#btn1, #btn2, #btn3").on("click", function(e){
e.preventDefault();
var target = $(this).data("target");
$(".targetdivs").css("display", "none");
$("#"+target+"-div").css("display", "block");
});//click
</script>
try this:
$('#btn1').click(function(){
$("#content div").hide()
$("#pilot").show()
});
$('#btn2').click(function(){
$("#content div").hide()
$("#design").show()
});
$('#btn3').click(function(){
$("#content div").hide()
$("#instrument").show()
});
$('#btn4').click(function(){
$("#content div").hide()
$("#innovations").show()
});
here's a jsfiddle
HTML
<div id="wrapper">
<input type="text" id="text">
<button id="t-1" value="1">1</button>
<button id="t-2" value="2">2</button>
<button id="t-3" value="3">3</button>
</div>
JavaScript
$(function() {
$('#wrapper').click(function(event) {
$('#text').append(event.target.value);
});
});
Clicking the button does not change the text-field-value!
Use this:
$(document).ready(function(){
$('#wrapper').click(function(event) {
$('#text').val(event.target.value);
});
});
Remember append is to add HTML content, whereas val is to get and set the input field value.
append adds HTML content after the input. What you are looking for (changing the text of the input) is val.
You need to use val() to set value of a textbox. append() is used to append a DOM element into another element (like appending dynamic li into ul tags). Below is a working snippet
$(function() {
$('#wrapper').click(function(event) {
$('#text').val(event.target.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<input type="text" id="text">
<button id="t-1" value="1">1</button>
<button id="t-2" value="2">2</button>
<button id="t-3" value="3">3</button>
</div>
Firsly here's the fiddle
I have an image with class "Full", and there is a div with class "group-of-buttons", I want to remove this img and add it after the div "group-of-buttons" with js, here's the HTML Code:
<img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL"/>
<br><br>
<div class="group-of-buttons">
<button class="one">One </button>
<button class="two">Two </button>
</div>
Any help would be appreciated.
You may use insertAfter:
$('.FULL').insertAfter('.group-of-buttons');
Should do what you want. It was just a matter of using the .insertAfter() jQuery method.
$(document).ready(function() {
var img = $('img.FULL');
img.insertAfter($('div.group-of-buttons'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL" />
<br>
<br>
<div class="group-of-buttons">
<button class="one">One</button>
<button class="two">Two</button>
</div>
$('.one').on('click', function() {
var img = $('img.FULL');
img.remove();
img.insertBefore('.group-of-buttons');
});
$('.two').on('click', function() {
var img = $('img.FULL');
img.remove();
img.insertAfter('.group-of-buttons');
});
I hope this was what you were looking to achieve example here: http://jsfiddle.net/atrifan/1ejmzkhp/
I added some extra id and div to your code. can you try this : buttons moves img from one div to another.
<script>
function moveImage(movefrom,moveto,img_id) {
imgtxt = document.getElementById(movefrom).innerHTML;
imgobj = document.getElementById(img_id);
document.getElementById(movefrom).removeChild(imgobj);
document.getElementById(moveto).innerHTML = imgtxt;
}
</script>
<div id="div1"><img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL" id="img"/></div>
<br><br>
<div class="group-of-buttons">
<button class="one" onclick="moveImage('div2','div1','img');">One </button>
<button class="two" onclick="moveImage('div1','div2','img');">Two </button>
</div>
<br>
<div class="secondary-div" id="div2">
Secondary Div
</div>
I hope it helps.
I am trying to display a hidden class in jQuery but it is no applying to the class I am targeting. It displays the whole class:
<div class="feeds">
<input class="post_id" />
<textarea class="commentdata"></textarea>
<button class="mmore">More</button>
<p class="time">time</p>
<div class = "comment_data">
<div class = "comment">
<p> Comments </p>
</div>
</div>
</div>
<div class="feeds">
<input class="post_id" />
<textarea class="commentdata"></textarea>
<button class="mmore">More</button>
<p class="time">time</p>
<div class = "comment_data">
<div class = "comment">
<p> Comments </p>
</div>
</div>
<div class="feeds">
<input class="post_id" />
<textarea class="commentdata"></textarea>
<button class="mmore">More</button>
<p class="time">time</p>
<div class = "comment_data">
<div class = "comment">
<p> Comments </p>
</div>
</div>
</div>
The class comment_data is display: none by default and should only be displayed whenever the More button is clicked. Working but it is displaying all the comments for 3 div.
This is my jQuery code:
$( ".mmore" ).click(function() {
$('.comment_data').slideToggle("slow");
});
$('.mmore').click(function() {
$(this).parents('.feeds').find('.comment_data').slideToggle('slow')
});
You can use .closest() to find .feeds div and then use .find() for *.comment_data* div
$('.mmore').click(function() {
$(this).closest('.feeds').find('.comment_data').slideToggle('slow')
});
You're selecting all objects matching the selector .comment_data.
You'll need to limit it to the same container that the clicked button is in. There's a number of ways you could do this. One easy one would be:
$( ".mmore" ).click(function() {
$(this).parent().find('.comment_data').slideToggle("slow");
});