I have the following javascript I use to fade off list elements but it only works on the first item and next element with the property id doesn’t fade off. I need all elements with the correct id to fade off.
[code]
<--this one doesn't work [/code]I don’t know enough about javascript to know how to do this. Any help will be greatly appreciated. Thanks
The first thing to address is the use of the same id attribute on both <li> tags. ID’s need to be unique within the same page. If you want to apply the same selector to more than one element, use class instead.
After fixing the issue mentioned by @chrisofarabia, you just have to extract the ID-number of this with a regular expression to get the related element:
<li id="autoUpdate12">foo</li>
<li id="autoUpdate13">bar</li>
<input type="checkbox" class="checkbox" id="related-checkbox12" />
<input type="checkbox" class="checkbox" id="related-checkbox13" />
<script type="text/javascript">
jQuery('.checkbox').change(function() {
var id = $(this).attr('id').match(/\d+$/)[0]
, $element = jQuery('#autoUpdate' + id);
if (this.checked) $element.fadeIn('slow');
else $element.fadeOut('slow');
});
</script>
I couldn’t get it to work. I tried changing everything to see if I could get it to work. Most of the time I have to change $ to jQuery for jQuery to work as I have prototype also. Here’s my last try.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.checkbox').change(function() {
var id = jQuery(this).attr('12').match(/\d+jQuery/)[0]
, $element = jQuery('#autoUpdate' + id);
if (this.checked) $element.fadeIn('slow');
else $element.fadeOut('slow');
});});
</script>The $ at the end of the regular expression means “end of input” and has nothing to do with jQuery, so don’t replace it (sorry for $(this), the dollar sign somehow slipped in). Also, there’s no attribute such as 12 – what you want is the id, as in my above snippet. And don’t give up so quickly! :-)
@chrisofarabia
I didn’t think this was important but I add the id in dynamically like this:
<input type="checkbox" class="checkbox related-checkbox" id="related-checkbox<?php echo $itemid; ?>"<li id="autoUpdate<?php echo $itemid; ?>"Then in the javascript I was doing it like:
<script type="text/javascript">jQuery(document).ready(function(){jQuery('#related-checkbox<?php echo $itemid; ?>').change(function(){if(this.checked)jQuery('#autoUpdate<?php echo $itemid; ?>').fadeIn('slow');else jQuery('#autoUpdate<?php echo $itemid; ?>').fadeOut('slow');});});</script>
Then using this script multiple times for different checkboxes and elements. I did get it to work thou.
It’s not working correctly. I’m using your code this way:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.checkbox1').change(function() {
var id = jQuery(this).attr('id').match(/\d+$/)[0]
, $element = jQuery('#autoUpdate' + id);
if (this.checked) $element.fadeIn('slow');
else $element.fadeOut('slow');
});});
</script>If I add two list like this:
<li id="autoUpdate12" >hello</li>
<li id="autoUpdate12" >hello</li>It gets only the first one it comes to on the page as before. Am I using your code correctly? What am I missing?
I’m not sure but after rereading this appears you may have misunderstood exactly what I’m trying to do.
I need the script to hide all ids with the same id. It looks like you may have thought I need to hide all ids with autoUpdate[hatever-here] but I’d like to hide the ids that are exactly the same like autoUpdate12 i.e. all with autoUpdate12.
…just in case
thanks
You’re only listening to changes of elements with the class checkbox1 – I suppose you want to listen to changes of all checkboxes. In your first post that’d be checkbox – just make sure that every checkbox has this class. If every checkbox has a unique class with a number at the end but beginning with “checkbox”, this can be queried like
jQuery('[class^="checkbox"]').etc()
You can read more about attribute selectors here. Note that you don’t need to add a separate event listener for every element like in your previous post – one for all checkboxes is enough. This way you don’t have to generate it with PHP.
Edit: x-post
An id can only occur ONCE per page - so hiding that id will only ever hide one element.
No, the snippet I posted above listens to changes of all checkboxes with the class checkbox. However, within the event handler function this always refers to the checkbox that was actually changed, so you can get the ID of that specific element – and then get the corresponding <li> element by extracting the number at the end.
Edit: Here’s the fiddle.
<li id="autoUpdate<?php echo $itemid; ?>" >hello</li>
<li id="autoUpdate<?php echo $itemid; ?>" >hello</li>
<input type="checkbox" class="checkbox1" id="related-checkbox<?php echo $itemid; ?>">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.checkbox1').change(function() {
var id = jQuery(this).attr('id').match(/\d+$/)[0]
, $element = jQuery('#autoUpdate' + id);
if (this.checked) $element.fadeIn('slow');
else $element.fadeOut('slow');
});});
</script><?php echo $itemid; ?>Could be any number.
<li id="autoUpdate<?php echo $FirstItemId; ?>" >hello</li>
<li id="autoUpdate<?php echo $FirstItemId; ?>" >hello</li>
<input type="checkbox" class="checkbox2" id="related-checkbox<?php echo $FirstItemId; ?>">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.checkbox2').change(function() {
var id = jQuery(this).attr('id').match(/\d+$/)[0]
, $element = jQuery('#autoUpdate' + id);
if (this.checked) $element.fadeIn('slow');
else $element.fadeOut('slow');
});});
</script><?php echo $FirstItemId; ?>Could also be any number. I need each script to hide all ids with its number.
yeah I [quote=“felgall, post:10, topic:224724”]
An id can only occur ONCE per page - so hiding that id will only ever hide one element.
[/quote]
Yeah I forgot about that.
You only need one script. ;-) See my previous post, I’ve added a fiddle.
I apologize I wasn’t clear. From your fiddle example below you’ll see what I mean.
<li id="autoUpdate12">foo</li>
<li id="autoUpdate12">foo</li>
<li id="autoUpdate13">bar</li>
<input type="checkbox" class="checkbox" id="related-checkbox12" checked/>
<input type="checkbox" class="checkbox" id="related-checkbox13" checked/>
jQuery('.checkbox').change(function() {
var id = $(this).attr('id').match(/\d+$/)[0]
, $element = jQuery('#autoUpdate' + id);
if(this.checked) $element.fadeIn('slow');
else $element.fadeOut('slow');
});I need to change the id to classes but anyway I need hide both ids with say autoUpdate12 above when I click one checkbox. Right now the way the fiddle works is what is actually happening. But I need both id=“autoUpdate12” to hide at the same time. Actuall they need changed to classes but you know what i mean?
As @felgall said, this won’t work as IDs are supposed to be unique. It does work with classes though.
Yeah I thought that might be the problem now. I’ll give it a try with classes. : )
Thanks
It works now. Thank you
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.