CODEWITHSUNDEEP
javascriptjqueryarrays
Phlume
Phlume

Reputation: 3131

Array of functions for getElementbyId

I am trying to recreate a solution similar to this: http://bit.ly/1kD64dR

I need a DRY solution as I am going to be recreating this for 20+ elements:

I have tried creating an array of ids, and then calling a single function on each array but I just can't seem to wrap my head around the logic. I am restarting from the ground up...

What I want to accomplish is to show a series of images (for now i'm using text)... Each image will have a function applied to the onClick event, and then the new div that is shown will also have a click event applied to it.

FIDDLE

The actual excerpt from the code to be used showing each li element's contents:

...
<li>
  <a href="#" onClick="show13()">
    <img src="../images/rtw3.jpg" alt="" /></a>
  <div id="img3">
    <a href="#" onClick="hide13()">
      <img src=".../images/block.png" alt="" />
    </a>
  </div>
</li>
...

Everything Works in the demo above...I just want to streamline and simplify the code. Here is the WET example:

HTML

<ul>
<li><a href="#" onclick="show1()">Click me</a>
    <div id="d1" class="hide">
        <a href="#" onclick="hide1()">Shown!</a>
    </div>
</li>
<li><a href="#" onclick="show2()">Click me</a>
    <div id="d2" class="hide">
        <a href="#" onclick="hide2()">Shown!</a>
    </div>
</li>
<li><a href="#" onclick="show3()">Click me</a>
    <div id="d3" class="hide">
        <a href="#" onclick="hide3()">Shown!</a>
    </div>
</li>
<li><a href="#" onclick="show4()">Click me</a>
    <div id="d4" class="hide">
        <a href="#" onclick="hide4()">Shown!</a>
    </div>
</li>
</ul>

JS

function show1(){
document.getElementById("d1").className ='show';
}
function hide1(){
document.getElementById("d1").className ='hide';
}
function show2(){
document.getElementById("d2").className ='show';
}
function hide2(){
document.getElementById("d2").className ='hide';
}
function show3(){
document.getElementById("d3").className ='show';
}
function hide3(){
document.getElementById("d3").className ='hide';
}
function show4(){
document.getElementById("d4").className ='show';
}
function hide4(){
document.getElementById("d4").className ='hide';
}

Upvotes: 1

Views: 392

Answers (4)

Karolis Tarasaitis
Karolis Tarasaitis

Reputation: 43

Another option is not to use onclick handlers in html and jQuery at all and just use javascript querySelectorAll, read about it here.

For example: querySelectorAll('div[id^="d"]') selects all ids which start with 'd'

then combine it with forEach read about it here.

and use 

element.addEventListener('click', function(event) {
    (hide or show elements)
});

Advantages: no jQuery (not rly an advantage :)), no javascript in html (not an advantage if you think about code readability).

Hope you will get some new ideas.

Upvotes: 0

n1k1ch
n1k1ch

Reputation: 2692

Get rid of inline onclick listeners and use jQuery way to listen onclick for each a and toggleClass of sibling div

$(document).on("click", "a", function(e){
    $(this).next("div").toggleClass("show hide");
});

Demo is here

Edited (to make "Shown" disappear by click on it)

Change each li as follows (add parent and nest classed to a):

<li><a href="#" class="parent">Click me</a>
    <div id="d1" class="hide">
        <a href="#" class="nest">Shown!</a>
    </div>
</li>

And script will be:

$(document).on("click", "a.parent", function(e){
    $(this).next("div").toggleClass("show hide");
});

$(document).on("click", "a.nest", function(e){
    $(this).parent("div").toggleClass("show hide");
});

Updated Demo

Upvotes: 1

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

A little example using jQuery

   $("li > a").click(function(){
    $(this).parent().find(".hide").toggleClass("show hide")
   })

  $(".hide > a").click(function(){
    $(this).parent().toggleClass("show hide")
  })

jsFiddle

Upvotes: 0

Marc B
Marc B

Reputation: 360602

You should exploit the DOM. All nodes (aka tags) in a document, and any events generated on that tree, "know" where they are in the tree.

<li><a href="#" onclick="show(this)">Click me</a>
                              ^^^^^---- 
    <div id="d3" class="hide">
        <a href="#" onclick="hide(this)">Shown!</a>
                                  ^^^^----
    </div>
</li>

function show(obj) {
   obj.nextSibling.style="display: block"; // <div> is adjacent to the <a> that got clicked
}

function hide(obj) {
   obj.parentNode.style = "display: none"; // get the <div> above the clicked <a>
}

The same show/hide calls can be used in EVERY one of your <li> tags, and the DOM tree itself will take care of making sure the right nodes are shown/hidden.

Upvotes: 1

Related Questions