how to hide div on object of div click
I am adding jquery path than my html code is here as it is and than after I am apply script to delete label class="main" with span and div class close1
but it's not perform
<label class="main ">
<span class="tag-value">mysql </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">codeigniter </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">ajax </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">jquery </span>
<div class="close1">X</div>
</label>
<script>
$(function(){
$(".close1").click(function(){
$(this).parent(".main").hide();
});
});
</script>
Check that JQ lib. is in the head of you r document, also, you can probably just use .parent()
http://jsfiddle.net/Yx4EU/
<script>
$(function(){
$(".close1").click(function(){
$(this).parent().hide();
});
});
</script>
If this does not work, I suggest adding a fiddle for someone to look at.
Check this out: http://jsfiddle.net/8436y/1/
In this fiddle you will notice I haven't defined the parent, since it is not necessary (in this case).
http://jsfiddle.net/8436y/5/
here I have used the .closest() to define the closest class="main" , which also works ;)
Related
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
I am new to jQuery so please help me with the output.
Below is the HTML code used for reference.
<html>
<body>
<div id="level1">
<p>
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</p>
</div>
</body>
</html>
When I used following as script
<script type="text/javascript">
$(document).ready(function (){
var div = $("#level1").find("div").each(function(){
alert($(this).attr('id'));
});
});
</script>
The result was 5 alerts with id of each div
But when I used
<script type="text/javascript">
$(document).ready(function(){
var div = $("#level1").find("span > div").each(function(){
alert($(this).attr('id'));
});
});
</script>
There were only two alert for level 1.2.1 and 1.2.2
I was wondering why there was no alert for 1.1.1 and 1.1.2 as they also have span as their parents?
Thanks in advance.
If divs can't be child of
then why is
<p>
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
</p>
Working fine ??
Because of your incorrect HTML.
The browser is going to generate your html as followed.
<p>
<span id="level1.1">
</span>
</p>
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
Because a div can't be a child of a p
If you remove the first <p> in your code, you wil get an alert of the 4 levels sub levels.
divs cannot be children of p in HTML
Change your HTML markup with the following:
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
and you should yield the expected results !
Because your HTML structure is not correct this how your structure is populated :
.find() method only travels a single level down the DOM tree.
Here you can find it.
The .find() and .children() methods are similar, except that the .find() method only travels a single level down the DOM tree.
Ok, this sounds easy, but I'm having problems trying to identify the anchor tag. The HTML block repeats itself.
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#q1">
Question 1
</a>
</h4>
</div>
<div id="q1" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label for="inputQ1" class="col-sm-2 control-label">Question</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="inputQ1" placeholder="e.g How was our service?">
</div>
</div>
</div>
</div>
I got the answer I need over here
how to show text while typing in textarea in jquery
What I need to know is, how do I make it so that the text in the anchor tag changes? I don't want to put in an ID for all of them. I should be using parent() and siblings(), right?
Try
jQuery(function ($) {
$('.panel-body input').keyup(function(){
$(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value)
})
});
Demo: Fiddle
Note: To be more specific I might add an additional class as shown in this fiddle
You can do this with keyup and html:
$(document).ready(function(){
$("#text").keyup(function(){
$("#q1").html($(this).val());
});
});
Where #text is the textarea and #q1 is the anchor:
JSFiddle
You can use:
$('#inputQ1').keyup(function(){
var $this = $(this);
$this.closest('#q1').prev().find('a').html($this.val());
});
Fiddle Demo
I think the best (because the logic) if you could create a parent around this code (if you can)
<div class="parent">
<h4>
<a>...</a>
</h4>
<div>
<input>
</div>
</div>
in the event $(this) is your input
you can use $(this).closest('parent').find('a') to find the for the
Try using anchor parent:
$('.panel-title a').text( /* textarea text */ );
try this
$('.panel-title a').text( 'new text' );
I have a block of code that is attached to a jQuery click event. Here's the element:
<!-- Profiles -->
<div class="profiles">
<h1>Profiles</h1>
<div class="profile">
<div class="name">
<input type="text" maxlength="14" value="Default" />
<span class="rename">q</span>
</div>
<div class="controls">
<span class="edit">EDIT</span>
<span class="duplicate">COPY</span>
<span class="delete default">J</span>
<div class="alert-box">
<p>Are you sure you want to delete this profile?</p>
<div>Y</div>
<div>N</div>
</div>
</div>
<div class="saved">
<span class="cancel-button">Cancel</span><span class="save-button">Save</span>
</div>
</div>
</div>
When the item is selected, it becomes available for editing. Here's the event listener:
$('.rename').click(function () {
$('.selected .rename').fadeIn(80);
$(this).fadeOut(80);
$(this).parent().addClass('selected');
});
There's another event that listens for a click anywhere else on the page to deselect the item being edited:
$(document).click(function () {
$(".selected .rename").fadeIn(80);
$('.name').removeClass('selected');
});
When it is clicked on, it should be selected to allow for editing. When I move the code from the profile into a knockout template, it doesn't listen to the click event anymore. When I inspect the Event Listeners in Chrome's tools, the listener is nowhere to be found. Here is what my template looks like:
<div class="profiles">
<h1>Profiles</h1>
<div data-bind="template: { name: 'profilestempl', foreach: $root.profiles }"></div>
</div>
<script type="text/html" id="profilestempl">
<div class="profile">
<div class="name">
<input type="text" maxlength="14" data-bind="value: name" />
<span class="rename">q</span>
</div>
<div class="controls">
<span class="edit">EDIT</span>
<span class="duplicate">COPY</span>
<span class="delete">J</span>
<div class="alert-box">
<p>Are you sure you want to delete this profile?</p>
<div>N</div><div>Y</div>
</div>
</div>
<div class="saved">
<span class="cancel-button">Cancel</span><span class="save-button">Save</span>
</div>
</div>
</script>
Can someone explain to me why the event listener no longer works on the dynamically added elements? I would also like help in solving this problem. Thanks!
You have to add click event listener on the outer element which is always visible (since it doesn't work on hidden elements). And then add other selector for template code (which is hidden)
Sample code would be:
function addClickEventToCloseButton(){
$("#outerAlwaysVisible").on('click','#templateHiddenInitially',function(){
alert('works')
});
}
If you want the handler to work on elements that will be created in the future you should use on : http://api.jquery.com/on/
With jquery, I want to get the rgb color code from the spzn previous to the one that was clicked.
I can get the clicks with this:
$(document).ready(function(){
$( "#myDiv :radio").click(function(){
alert("Got here");
});
});
So, how do I get the rgb code #000000 from the span with class swatchColour_1 prior to the radio button.
There are about 30 li elements for different colors. The only code I can actually change is the very first div with id="myList"
<div class="productAttributeList" id="myList" style="">
<div class="productAttributeRow xx" id="ffb492067dcd98c19b6be89e9230f4fc">
<div class="productAttributeLabel">
<label for="06b0854950dd6cc1d296718965c0d36a">
<span class="required">*</span>
<span class="name">Color choice:</span>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionPickListSwatch">
<ul>
<li class="swatch hasPreview swatchOneColour">
<label for="0780a439a3a2ec8492a8772f4f5d739a">
<span class="previewContent">
<span class="swatchColours swatchOneColour showPreview" title="Black - 070">
<span class="swatchColour swatchColour_1" style="background-color:#000000;"> </span>
</span>
</span>
<input type="radio" class="validation" name="attribute[119]" value="195" id="0780a439a3a2ec8492a8772f4f5d739a" />
<span class="name">Black - 070</span>
</label>
</li>
.
.
.
Thanks Gary
$(document).ready(function(){
$( "#myDiv :radio").click(function(){
alert($(this).prev("span.previewContent").find(".swatchColour_1").css("background-color"));
});
});
You can use .prev(), .find() and .css() methods:
$( "#myList input[type=radio]").change(function() {
var color = $(this).prev().find('.swatchColour_1').css('background-color');
});
Or using .closest() method:
var color = $(this).closest('.previewContent')
.find('.swatchColour_1')
.css('background-color');
http://api.jquery.com/