Selecionar elemento

[marcus_du 1]

Galera,

 

Veja se vocês podem me ajudar, tenho o seguinte script que fiz aqui para exemplificar o que preciso:

Preciso que ao clicar nos elementos (escolha), os respectivos elementos (escolhafile) apareça ao lado, vejam o que já fiz, ai está apenas de exemplo...

 

http://jsfiddle.net/M8gP6/2/

 

 

 

Valeu!

[William Bruno 1501]

Só fiz uma alteração no teu CSS

.selecFile{
    float: left;
    width: 30px;
}
.escolhaFile {
    display: none;
}

note que se vc esconder o pai, vc nunca vai conseguir mostrar os filhos.

[marcus_du 1]

Certo...

 

Mas conseguiu entender a minha necessidade?

[William Bruno 1501]

Sim, e com essa alteração que eu fiz, aparentemente funcionou.

Eu fiz algo parecido um tempo atrás para responder outra dúvida aqui no fórum:

http://wbruno.com.br/javascript-puro/ocultar-ou-mostrar-div-javascript/

 

 

Ainda tem alguma dúvida ?

[marcus_du 1]

Observe só...

 

Refiz em jQuery, utilizando algumas táticas que você fez.

 

Ficou da seguinte forma:

 

O html:

                    <div class="elementsContent" style="width: 90%;" data-theme="1">
                                <div class="selectProjeto" id="projetoSelect1">
                                    <div class="txtComand">Selecione o label que se iniciará o projeto</div>
                                        <div class="clear" style="height: 10px;"></div>
                                    <div class="projetoLk" id="theme1" data-me="theme1" data-type="select">
                                        <img src="add/imgFull.png"/>
                                    </div>
                                    <div class="projetoLk" id="theme2" data-me="theme2" data-type="select">
                                        <img src="add/imgTop.png"/>
                                    </div>
                                    <div class="projetoLk" id="theme3" data-me="theme3" data-type="select">
                                        <img src="add/txtImg.png"/>
                                    </div>
                                    <div class="projetoLk" id="theme4" data-me="theme4" data-type="select">
                                        <img src="add/videoImg.png"/>
                                    </div>
                                    <div class="projetoLk" id="theme5" data-me="theme5" data-type="select">
                                        <img src="add/imgImg.png"/>
                                    </div>
                                    <div class="projetoLk" id="theme6" data-me="theme6" data-type="select">
                                        <img src="add/img3Txt.png"/>
                                    </div>
                                    <input type="hidden" name="theme[]" id="themeProjeto" value=""/>
                                </div>
                                <div class="selectFile" id="fileSelect1" data-sending="1">
                                    <div class="sendFiles" id="theme1File" data-send="theme1" data-type="send">
                                        <div>Envio de arquivos - Tema 1</div>
                                        <div class="clear" style="height: 15px;"></div>
                                                        
                                    </div>
                                    <div class="sendFiles" id="theme2File" data-send="theme2" data-type="send">
                                        Envio de arquivos - Tema 2
                                    </div>
                                    <div class="sendFiles" id="theme3File" data-send="theme3" data-type="send">
                                        Envio de arquivos - Tema 3
                                    </div>
                                    <div class="sendFiles" id="theme4File" data-send="theme4" data-type="send">
                                        Envio de arquivos - Tema 4
                                    </div>
                                    <div class="sendFiles" id="theme5File" data-send="theme5" data-type="send">
                                        Envio de arquivos - Tema 5
                                    </div>
                                    <div class="sendFiles" id="theme6File" data-send="theme6" data-type="send">
                                        Envio de arquivos - Tema 6
                                    </div>
                                </div>
                    </div>

O jQuery:

 

    $(document).on( "click", ".projetoLk", function(){
        var item = $(this).parent().attr("class");
        $(".projetoLk").removeClass("activeLk");
        $(this).addClass("activeLk");
        var vals = $(this).attr("id");
        $("#themeProjeto").val(vals);
        $(".sendFiles").hide();
        var ident = $(this).attr("data-me");
        var identPar = $(this).parent().parent().attr("data-theme");
        var sending = $("[data-send="+ident+"]");
        $(sending).show();
    });

Porém, o HTML é replicado, alterando apenas os elementos: data-theme="1" e data-sending="1".

 

Ai vem a dúvida, como faço para quando for duplicado, o elemento do HTML corresponda a apenas o seu elemento, e não ao primeiro...

 

De forma mais clara:

 

Quando selecionar no primeiro, mexer apenas no primeiro, o segundo apenas no segundo e assim por diante.

 

Alguma dica? Da forma que estou fazendo está certa?

Olha como ficou!

 

http://jsfiddle.net/marcusdu/7L5Ng/2/

 

Estou no caminho certo?

[William Bruno 1501]

o número no data=* é que vai fazer com que vc só se referencie ao elemento correto.

 

qndo for Adicionar mais elementos, esteja certo de que o número não se repita.