Question

好的，这是我的小项目的额外软件，基本上我有一个巨大的div里面有这样的小div：

<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：

 <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';
}

但这只是举例说明它的外观。现在当我点击Info时，它会显示一个popUp，其中包含一些（go figure）信息，其中包含：

名称：第X项

我不想为每个项目制作div，所以我想做一些esque Java修复，如：

String name =＆＃34; Item：＆＃34; + x。其中x是当我点击所述div时程序应该自动获取的项目的名称或编号。问题是，首先我不知道Javascript的确切sintax，也不知道我想要的确切方式。

我在考虑某种循环，比较每个div的id，当选择一个div时，它会分配＆＃34;名称：＆＃34; X一个值，但我仍然有限的经验喊出来，为此我需要某种i ++，否则我应该如何分配一个int或字符串？

对不起，如果我有点失去了思路，英语不是我的主要语言，我有点沮丧，就像你的舌头上有一个单词＆gt;。我知道如何做到这一点......

任何帮助将不胜感激祝福！

Answer 1

这就是你问的问题，这是在Jquery，我附上了一个小提琴检查它

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

      });

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

如果您需要以高效的方式使用jquery和JS，可以将它们混合使用。

有没有办法根据其div的id更改列表的元素？

1 个答案: