CODEWITHSUNDEEP
javascripthtmlcss
Code Grasshopper
Code Grasshopper

Reputation: 620

Is there any way to change a element of a list depending on the id of its div?

Okay this is extra software for my little project, basically I have a huge div with little divs inside like this:

<div class="scroll-area" id="lista">

        <div class="box" id="item1">
            <p>Item #1</p>
            <p class="info"><a href="#" id="lnkInfo">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item2">
            <p>Item #2</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Reservar</p></a>
        </div>

        <div class="box" id="item3">
            <p>Item #3</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item4">
            <p>Lab #4</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item5">
            <p>Item #5</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item6">
            <p>Item #6</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>
               </div>

PopUp for item:

 <div class="popUp hide" id="popUp">
        <div class="stylePopUp">
          <span>Info</span>
          <span value="Close" id="btnClose">x</span>
        </div>
            <ul>
        <li>Nome: Item #1</li> !-- Here is where I want to replace -->
            <li>BLA</li> 
        <li>BLA</li>
        <li>BLA</li>
    </ul>



        </div>

CSS

.box {
   display: inline-block;
   padding: 2px;
   width: 75px;
   border: 2px solid black;
   margin: 3px;
}


.box:hover{
border:2px solid #e67e22;
}

Javascript:

var elementInfo = document.getElementById('lnkInfo'),
elementBtnClose = document.getElementById('btnClose'); 

elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrect');
});

elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrect');
});

function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}

function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}

But that is just to put a example of how it looks. Now when I click Info it displays a popUp with some (go figure) information in it which says:

Name: Item X

I don't want to make a div for each item, so I wanted to do some esque Java fix like:

String name = "Item:" + x. Where x is the name or number of item which the program should fetch automatically when I click on said div. The problem is that first I don't know the exact sintax for Javascript, nor the exact way of how I want that.

I was thinking in some sort of loop that compares the id of each div and when one is selected it assigns "Name:" X a value, but still my limited experience shouts that for that I would need some sort of i++, else how I am supposed to assign a int or string?

Sorry if I kinda lost the line of thought, English is not my main language and I am kinda frustrated, like when you have a word in the tip of your tongue >.< I have an idea of how to do it...

Any help would be appreciated Best Wishes!

Upvotes: 0

Views: 81

Answers (1)

Amarnath R Shenoy
Amarnath R Shenoy

Reputation: 5201

Here it is what you asked, This is in Jquery, I have attached a Fiddle check it

     $('.box').click(function(e){
        var divobj = $(this);
        alert(divobj.attr('id'));

      });

http://jsfiddle.net/AmarnathRShenoy/aJt2K/

You can mix jquery and JS , if you need this in a much efficient way.

Upvotes: 1

Related Questions