Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kim sue il

[Resolvido] Como consigo pegar o ID de uma classe HTML com o text

Por , em Javascript

Recommended Posts

kim sue il    1

kim sue il
Postado

Eu tenho várias DIVs com o mesmo nome ("técnicas"), tornei esses elementos arrastáveis (draggable), PORÉM... alguns desse elementos eu não posso deixá-los arrastáveis, por isso pensei em mudar o nome da classe... mas como consigo fazer isso sem o ID (que é a única coisa que os diferencia)?

 

Tentei fazer um .attr("id"), mas... como só tenho o texto da DIV diz que é indefinido...

Alguém sabe como me ajudar?

 

PS:. Sou um ignorante em JavaScript, sei MUITO pouco... peguei este código abaixo e o adaptei, portanto... gambiarras são inevitáveis... peço desculpas... segue o código em questão:

 

function ElementosArrastaveis(){

setTimeout(function(){ 
    var h = $(".tecnicas").text(); // aqui ficam as 10 DIVs de classe = técnicas
       nome1 = "<?php echo $nome1?>";
       nome2 = "<?php echo $nome2?>";
       nome3 = "<?php echo $nome3?>";
       nome4 = "<?php echo $nome4?>";
       nome5 = "<?php echo $nome5?>";
       nome6 = "<?php echo $nome6?>";
       nome7 = "<?php echo $nome7?>";
       nome8 = "<?php echo $nome8?>";
       nome9 = "<?php echo $nome9?>";
       nome10 = "<?php echo $nome10?>";
       status1 = "<?php echo $nao1?>";
       status2 = "<?php echo $nao2?>";
       status3 = "<?php echo $nao3?>";
       status4 = "<?php echo $nao4?>";
       status5 = "<?php echo $nao5?>";
       status6 = "<?php echo $nao6?>";
       status7 = "<?php echo $nao7?>";
       status8 = "<?php echo $nao8?>";
       status9 = "<?php echo $nao9?>";
       status10 = "<?php echo $nao10?>";
       i = h.split('.');

       if((i[0] == nome1) && (status1 == "nao")){

        alert(i[0]); // este foi apenas um teste, peguei o 1º elemento e tentei pegar o ID... sem sucesso
         k = $(i[0]).attr("id");
         alert(k);
        // eu podia apenas alterar o nome da casse pela própria classe... mas aí nenhum outro elemento poderia ser arrastado
       }
$(".tecnicas").draggable({ //transforma os elementos com id "tecnicas" arrastáveis

	helper:"clone", //Indica que arrastaremos apenas um clone do objeto arrastável
	zIndex:"10", //define os elementos arrastáveis como "prioridades", iram sobrepor todos os elementos da página
	opacity:"0.85", //torna o elemento "meio transparente"
	appendTo:"body",  //esse elemento só poderá ser arrastado no corpo do página (body)
	revert: false, //Com o valor "false" diz que após ser arrastado, o elemento NãO deve voltar para o lugar...
	start: function(a,B){

		$(b.helper).css({ border:"3px solid #000","background-color":"#fff","-moz-border-radius":"10px","-webkit-border-radius":"10px","border-radius":"10px"})
//altera as propriedade CSSs do clone arrastado
	} //fecha função

}); //fecha o "draggable"

$(".tecnicas").css("cursor","move");

GreyOut()},500) //se tudo der certo, chama a função GreyOut (que deixa o elemento arrastado no lugar certo, torna o elemento verdadeiro, cinza e manda a imagem

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

kexada    0

kexada
Postado

Você pode user 'removeClass()' para remover uma determinada classe do elemento.

 

Fiz um exemplo, espero que entenda.

 

 

<html>
   <head>
       <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
       <title>Teste</title>
       <script type="text/javascript">
           $(document).ready( function(){
               $('.class-x').click( function(){ //ao clicar em um elemento com a classe 'class-x'
                   var elemento = $( this );
                   alert( 
                       //attr captura um atributo do elemento
                       'id do elemento :     ' + elemento.attr( 'id' ) + '\n ' +
                       'class do elemento  : ' + elemento.attr( 'class' )
                   );

                   elemento.removeClass('blue'); //remove uma classe do elemento

                   elemento.addClass('black'); //adiciona
               });
           });
       </script>
       <style>
       .class-x{
           width: 100px;
           height: 100px;
           float: left;
           border: 1px dashed;

       }
       .class-y{
           width: 100px;
           height: 100px;
           float: left;
           border: 1px dashed;

       }
       .black{
           background: #000;        
       }
       .blue{
           background: #0000FF;
       }
       .pink{
           background: #FF00F0;
       }
       </style>
   </head>
   <body>
       <div class='geral'>

           <div class="items">
               <div id="a" class="class-x blue"></div>
               <div id="a" class="class-y blue"></div>
               <div id="a" class="class-x blue"></div>
               <div id="a" class="class-y blue"></div>
               <div id="a" class="class-y blue"></div>
           </div>
       </div>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kim sue il    1

kim sue il
Postado

Não está dando certo... consegui pegar o ID da classe e o nome... mas não altera nenhuma...

 

        i = h.split('.');

       if((i[0] == nome1) && (status1 == "nao")){

       id = $(".tecnicas").attr("id");
          alert(id); // exibe o ID certinho
       f = $(".tecnicas").attr("class"); //exibe o nome da classe
        $(f).removeClass("tecnicas"); // não remove o nome da classe :[

       }

Compartilhar este post

Link para o post
Compartilhar em outros sites

kexada    0

kexada
Postado

Não está dando certo porque você está usando apenas o 'id' sem o '#':

 

observe:

 

f = $(".tecnicas").attr("id"); //captura o id
$('#' + f).removeClass("tecnicas"); // agora remove :]

Compartilhar este post

Link para o post
Compartilhar em outros sites

kim sue il    1

kim sue il
Postado

Não está dando certo porque você está usando apenas o 'id' sem o '#':

 

observe:

 

f = $(".tecnicas").attr("id"); //captura o id
$('#' + f).removeClass("tecnicas"); // agora remove :]

 

Cara, na boa... escorreu uma lágrima aqui... rsrsrs

Sério, MUITÍSSIMO obrigado mesmo!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito