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')
Related
I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned
Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.
I have a <div> which contains a <button>. When this button is clicked, I want this <div> to be hidden and another new <div> to be shown in place of the current <div>. Also, the new <div> contains a <button>, which when clicked opens the old <div>. This will enable me to open one <div> at a time on click of the <button> present in those <div>. Can anyone tell me how to do this in AngularJS?
This picture shows my requirement
<body ng-init="showDiv = true">
<div ng-show="showDiv">
<h1>Div 1</h1>
<button ng-click="showDiv = false">Show Div 2</button>
</div>
<div ng-hide="showDiv">
<h1>Div 2</h1>
<button ng-click="showDiv = true">Show Div 1</button>
</div>
</body>
CodePen: https://codepen.io/RaymondAtivie/pen/OXYRyE
Please try something similar to below: use ng-click and ng-show
<div ng-show="!showDiv">
<button ng-click="showDiv=true"></button>
</div>
<div ng-show="showDiv">
<button ng-click="showDiv=false"></button>
</div>
Using ngShow:
<div ng-show="condition" ng-init="condition = true">
<button ng-click="condition = false">Toggle</button>
</div>
<div ng-show="!condition">
<button ng-click="condition = true">Toggle</button>
</div>
But keep in mind to seperate logic like the toggle in ngClick from the view and put it in the controller.
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>
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!
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");
});