5

Como faço um jQuery que reconheça se aria-selected="false" e se true trocar o background da div "seta-btn-sub" para outra imagem (img de seta). Isso é parte de um acordion e quero trocar a img da seta quando estiver aberta a parte (<div id="outraDiv">), o 'area selected' aparece dentro do h3.

<h3>
  <a>Banho</a>
  <div class="seta-btn-sub"></div>
</h3>
<div id="outraDiv"> 
  <ul>
    <li><a href="#">Condicionadores</a><span></span></li>
    <li><a href="#">sabonetes</a><span></span></li>
    <li><a href="#">shampoos</a><span></span></li>
    <li><a href="#">outros</a><span></span></li>    
  </ul> 
</div>

Fiz algo assim até agora, mas ainda não consegui fazer funcionar como desejo

<script>
    if($("#aria-selected").val() == true){
        $(".seta-btn-sub").css("background-image","url(images/seta-blue.png);");
    }
    else if($("#aria-selected").val() == false){
        $(".seta-btn-sub").css("background-image","url(images/seta-padrao-azul.png);");
    }
</script>  
3
  • Até onde eu entendo o aria-selected deve ser definido por uma implementação específica, não é algo automático do HTML ou do navegador. Tem algum plugin específico que você está usando?
    – utluiz
    Commented 13/02/2014 às 11:34
  • Sim, estou usando "acoordion" (jqueryui.com/accordion) que insere dentro do h3 o condição (aria-selected="true") quando abro a UL desejada, o que desejo é alterar a img da seta (background da div seta-btn-sub) que fica para o lado, para uma outra seta. Resumindo, ou seja, quando for (aria-selected="true") alterar o background da div "seta-btn-sub"para outro background-image. Obrigado
    – CRAJ
    Commented 13/02/2014 às 11:41
  • @CRAJ Lembre que, caso você queira dizer mais coisas sobre o seu problema (como o exemplo de código que você postou) não é necessário criar uma nova resposta. Você pode editar sua pergunta e colocar as informações necessárias. Bem vindo ao SOPT :)
    – Gabe
    Commented 14/02/2014 às 13:36

1 Resposta 1

6

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para manipular o cabeçalho e para remover os icones utilizei o option icons.

No beforeActive os cabeçalhos são ui.newHeader para o elemento que acabou de ser ativado e ui.oldHeader para o elemento que acabou de ser desativado.

No create o cabeçalho é o ui.header que retornará o elemento ativo do cabeçalho assim que o .accordion() for criado.

O resultado do código foi esse:

$(function() {
    $("#accordion").accordion({
        icons: null,
        beforeActivate: function( event, ui ) {
            $("#" + ui.newHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
            $("#" + ui.oldHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
        },
        create: function( event, ui ) {
            $("#" + ui.header.attr("id")).children(".seta-btn-sub").toggleClass("active");
        }
    });
});

Para fazer os teste com background utilizei este :

.seta-btn-sub {
    background: red;
    padding: 10px;
    float:left;
    border-radius: 7px;
}
.seta-btn-sub.active{
    background: #00FF00;
}

Dessa forma você vai poder inserir este código e colocar o para exibir o que precisar.

13
  • Olhando essa resposta acho que finalmente entendi a pergunta!
    – utluiz
    Commented 13/02/2014 às 13:50
  • esse (header) e esse (activeHeader) são pre determinados ou são variáveis?
    – CRAJ
    Commented 13/02/2014 às 14:21
  • eles fazem parte do jSon de configuração do .accordion() você pode ver exatamente como fica aqui jqueryui.com/accordion/#custom-icons Commented 13/02/2014 às 14:22
  • Mas basta inserir no JS o código e criar as classes com as imgs que quero? Por que fiz isso mas não aconteceu nada...estão iguais a antes
    – CRAJ
    Commented 13/02/2014 às 14:34
  • Você quer colocar imagens personalizadas no lugar dos icones do jquery-ui? Commented 13/02/2014 às 14:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .