I need to condense this javascript code

Question

I need to get the javascript code below to work with any of the following links:

<a href="#" class="example1">http://example.com</a>
<a href="#" class="test">Doesnt work now</a>

The code that is displayed after the link is clicked:

<div style='display:none'>
   <div id='example1' style='padding:10px; background:#fff;'>
      <a href="http://example.com" target="_blank">Link</a>
   </div>
</div>

The javascript code I need condensed to work with any class/id values I give:

<script>
    $(document).ready(function(){
        $(".example1").colorbox({width:"50%", inline:true, href:"#example1"});
        $(".example2").colorbox({width:"50%", inline:true, href:"#example2"});
        $(".example3").colorbox({width:"50%", inline:true, href:"#example3"});
        $(".example4").colorbox({width:"50%", inline:true, href:"#example4"});
        $(".example5").colorbox({width:"50%", inline:true, href:"#example5"});
    });

Where is the code you tried to write? This looks like a please-do-my-homework-for-me question. — Bernhard Hofmann
– Bernhard Hofmann, Commented Jul 29, 2011 at 16:26
Are you using a plug-in that allows .colorbox to be used or is there another function not shown? — ayyp
– ayyp, Commented Jul 29, 2011 at 16:27
This is working as it is on a current website. I just need to be able to put any value in the link class and match it up to the div id. .colorbox is a plug-in — josh
– josh, Commented Jul 29, 2011 at 16:30

karim79 · Accepted Answer · 2011-07-29 19:01:37Z

5

$("[class^='example']").each(function() {
    $(this).colorbox({width:"50%", 
                      inline:true, 
                      href:"#example" + $(this).attr("class").replace("example", "")
    });
});

or even simpler:

$("[class^='example']").each(function() {
    $(this).colorbox({width:"50%", 
                      inline:true, 
                      href:"#" + $(this).attr("class")
    });
});

edited Jul 29, 2011 at 19:01

answered Jul 29, 2011 at 16:30

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel A. White · Accepted Answer · 2011-07-29 16:29:29Z

0

function myColorBox(myClass, myLink) {
  return $("."+myClass).colorbox({width:"50%", inline:true, href:myLink});
};

answered Jul 29, 2011 at 16:29

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

Comments

maerics · Accepted Answer · 2011-07-29 16:33:31Z

0

It's unclear what you are asking but it sounds like you need a general method to perform the actions listed in your JavaScript snippet. Try something like this:

function doColorBox(sel, href) {
  return $(sel).colorbox({width:'50%', inline:true, href:href});
}
$(document).ready(function() {
  doColorBox('.example1', '#example1');
  doColorBox('.test', 'http://test.com');
  doColorBox('#foo', '#foo');
});

answered Jul 29, 2011 at 16:33

maerics

157k47 gold badges277 silver badges299 bronze badges

Comments

ayyp · Accepted Answer · 2011-07-29 16:36:06Z

0

Here's what you're looking for, I believe, http://jsfiddle.net/Skooljester/LggeY/. It gets the a tag's class and then shows a div with the corresponding ID.

answered Jul 29, 2011 at 16:36

ayyp

6,5984 gold badges35 silver badges47 bronze badges

Comments

Steve Wang · Accepted Answer · 2011-07-29 16:43:09Z

0

A simple for loop might actually be more condensed than some of these clever uses of bits of the jQuery API.

$(document).ready(function(){
  for (var i = 1; i < 6; i++)
    $(".example" + i).colorbox({width:"50%", inline: true, href:"#example" + i});
});

answered Jul 29, 2011 at 16:43

Steve Wang

1,8241 gold badge16 silver badges12 bronze badges

Collectives™ on Stack Overflow

I need to condense this javascript code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related