Ir para conteúdo

Arquivado

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

sambuka

Opção de trocar classe funciona apenas em uma div

Recommended Posts

Ele é utilizado para add e remover classes de uma div, porém ai vem o problema.

1 - Este código esta dentro de um FOR, que é utilizado para imprimir todas as postagens.

2 - Postagens que forem muito grandes terão a opção ler tudo, que ai será utilizado o código apresentado.

3 - Porém o código funciona apenas na primeira postagem com a opção ler mais, as demais simplesmente ao apertar no link para chamar a função não acontece nada .

4 - Se eu tiro o código de dentro do for, ai nada funciona.

5 - Já tentei tbm gerar id diferentes pra cada tag de cada post, mas não funciona nada ai. Fica certo os nomes, mas não sei pq ai não vai nada.

Agradeço quem puder dar alguma dica :)) Obrigado!!

 

http://pastebin.com/y3f8byqq

Compartilhar este post


Link para o post
Compartilhar em outros sites

Exemplo simples:

 

<html>
<head>
<style type="text/css">
.post-action-hide { display: none; }
.post-content { display: none; }
.post-action { margin-top: 10px; }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".post-action-show").on('click',function(){
        var $parent = $(this).parents('.post');
        $('.post-action-show', $parent).hide();

        $('.post-action-hide', $parent).show();
        $(".post-content", $parent).show();
    });
    $(".post-action-hide").on('click',function(){
        var $parent = $(this).parents('.post');
        $('.post-action-hide', $parent).hide();

        $('.post-action-show', $parent).show();
        $(".post-content", $parent).hide();
    });
});
</script>
</head>
<body>
<?php
    $max=10;
    $base=0;
    while($base<$max){
?>
    <div class="post">
        <p class="post-action post-action-show">Ler tudo</p>
        <p class="post-action post-action-hide">Encolher</p>

        <div class="post-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam adipisci, dolor voluptas autem quod quo neque vel dolorem tempora voluptatum laboriosam vero numquam ut sunt porro eius corporis culpa! Aliquam?</p>
        </div><!-- .post-content -->
    </div><!-- .post -->
<?php
    $max = $max -1; }
?>

</body>
</html>
note o uso do contexto e do $(this)

Compartilhar este post


Link para o post
Compartilhar em outros sites

*--------------------*

Muito Obrigado!!!


Modifiquei pra como eu queria, ficou show, agora so fazer os frufruzinho pra fica bonito kkkkk:

<html>
<head>
<style type="text/css">
.post-action-hide { display: none; }
.post-content {
height:50px;	
overflow:hidden;
}
.post-contentv {
height:auto;
}
.post-action { margin-top: 10px; }
.post-action-show{ color:rgba(191,16,19,1.00);}
.post{
height:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".post-action-show").on('click',function(){
        var $parent = $(this).parents('.post');
        $('.post-action-show', $parent).hide();

        $('.post-action-hide', $parent).show();
		$("#base", $parent).removeClass("post-content");
		$("#base", $parent).addClass("post-contentv");
		
    });
    $(".post-action-hide").on('click',function(){
        var $parent = $(this).parents('.post');
        $('.post-action-hide', $parent).hide();

        $('.post-action-show', $parent).show();
        $("#base", $parent).removeClass("post-contentv");
		$("#base", $parent).addClass("post-content");
    });
});
</script>
</head>
<body>
<?php
    $max=10;
    $base=0;
    while($base<$max){
?>
    <div class="post">
        <p class="post-action post-action-show">Ler tudo</p>
        <p class="post-action post-action-hide">Encolher</p>

        <div id="base" class="post-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam adipisci, dolor voluptas autem quod quo neque vel dolorem tempora voluptatum laboriosam vero numquam ut sunt porro eius corporis culpa! Aliquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam adipisci, dolor voluptas autem quod quo neque vel dolorem tempora voluptatum laboriosam vero numquam ut sunt porro eius corporis culpa! Aliquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam adipisci, dolor voluptas autem quod quo neque vel dolorem tempora voluptatum laboriosam vero numquam ut sunt porro eius corporis culpa! Aliquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam adipisci, dolor voluptas autem quod quo neque vel dolorem tempora voluptatum laboriosam vero numquam ut sunt porro eius corporis culpa! Aliquam?</p>
        </div><!-- .post-content -->
    </div><!-- .post -->
<?php
    $max = $max -1; }
?>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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