CODEWITHSUNDEEP
jqueryjquery-selectors
Codded
Codded

Reputation: 1256

jquery hide for multiple divs classes with IDs appended to end

I have multiple sections as divs, each with a number appended to the end of the id(id="section-'.$section.'"). There could be many of these and the id would increment each time.

I am trying to write a jquery script to show and hide the correct id="resource-'.$section.'". When the user clicks on the img inside the section div, it will show hide the appropriate resource div and hide all others.

<div id="section-'.$section.'">
<img src="" id="section-img-'.$section.'"/>
</div>

<div id="resource-'.$section.'"></div>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery("#resource").hide();
      jQuery("#section img").click(function()
           {
              jQuery(this).next("#resource").show();
           });
});
</script>

Any ideas or help would be very much appreciated. Thanks in advance.

modification:

<div class="section" id="section-'.$section.'">
    <img src="" class="section-img" id="section-img-'.$section.'"/>
        </div>


    <div class="resource" id="resource-'.$section.'"></div>

jsfiddle.net/kqQDH/1

Upvotes: 0

Views: 1771

Answers (5)

nbrooks
nbrooks

Reputation: 18233

UPDATED

jQuery(document).ready(function() {
    jQuery('.resource').hide();
    jQuery('.section-img').click(function() {
        jQuery('.resource').hide(); //hide others

        //parse id for index
        var idx = jQuery(this).attr("id").split('-')[2];
        jQuery('#resource-'+idx).show(); //show this
    });
});​

A class is not an id. They are two completely different html attributes; classes need not be unique -- and in fact your jQuery class selector relies on them not being so.

<div id="section-1" class="section" >
<img src="" id="section-img-1" class="section-img" />
</div>

<div id="resource-1" class="resource"></div>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('div[id^="resource"]').hide();
      jQuery('div[id^="section-img"]').click(function()
           {
              jQuery(this).parent().next('div[id^="resource"]').show();
           });
});
</script>​​​​​​

Note if you decide the previous structure of your classnames was necessary (for whatever reason), then you won't be able to use a class selector -- you will have to use an attribute starts-with selector.

It would be better if you assigned the elements ids as well as a class indicating what kind of element it is. e.g The first section would be <div id="section-1" class="section"></div>. Then you could select all sections at once with a simple class selector, or do something specific to one using its id.

Upvotes: 2

Tomer
Tomer

Reputation: 17930

Each time an image is clicked, you need to parse its number from the class and then find the correct div with the resource class:

jQuery(".section img").click(function()
 {
     //1.Hide all resources
     jQuery('div[class^="resource"]').hide();

     //2. parse number of resource to show   
     var number = parseInt($(this).attr('class').match(/(\d+)$/)[0], 10);
     var resourceClass = ".resource-" + number; 

     //3.find resource class and show it
     jQuery(resourceClass).show();
 });

I didn't test it so there might be some typing errors, but if i get your meaning this is the direction you want.

Upvotes: 1

MotsManish
MotsManish

Reputation: 485

first of all, if the class name is going to vary as per the number, you must assign it to ID of the div. Assuming that, here is the solution:

    $('img[id^="section-"]').click (function (e) {
  var temp_section = $(this).attr('id').replace('section-','');
      $('#resource-'+temp_section).show();
      $('div[id^="resource-"]').css("display","none");
    });

Upvotes: 1

Mitya
Mitya

Reputation: 34556

1) your current .resource and .section selectors will fail because there are no elements with precisely those classes - as you say, the classes are .section-4 for example, not just .section.

2) The next() command will fail because it's running from the context of the img tag, but in fact the .resource DIV is a sibling of the parent .section DIV

Harmonise your class names to be general, and if things really need unique IDs, use an id attribute for that. So, HTML:

<!-- classes generalised; add in unique IDs as required -->
<div class="section">
    <img src="" class="section-img" />
</div>
<div class="resource"></div>

There, the class names are consistent and not unique. This makes the JS part much simpler.

jQuery(".resource").hide();
jQuery(".section img").click(function() {
    jQuery(this).parent().next(".resource").show(); //<-- note, parent()
});

Upvotes: 1

amd
amd

Reputation: 21472

I suggest to you follow the below scenario : put all the sections in a div#sections, and your resources in a div#resources then get the index of the parent of clicked image then show the resource having this index.

your code may look like :

<div id="sections">
   <div class="section">
      <img src="" class="section-img"/>
   </div>
   ...
</div>

<div id="resources">
   <div class="resource"></div>
   ....
</div>

<script>
   $(document).ready(function(){  $('.section-img').click(function(){ var index = $(this).parent().index();  $('.resource').hide().filter(':eq('+index+')').show()  })  })
</script>

Upvotes: 1

Related Questions