0

Minha duvida e a seguinte, tenho um Button e quero trocar o seu texto pelo texto das li (texto das tags <a>) subsequentes. A principio fiz um script que não funcionou, a minha intenção resumindo, é trocar o texto do button dropdown pelo texto da li clicada.

HTML

   <div class="btn-group col-xs-3 col-sm-3">
                <button type="button" class="selectionCalendar btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Calendario <span class="caret"></span>
                </button>                 
                <ul class="selectionCalendar dropdown-menu box-white clearfix">
                    <li ><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="WeekToday dropSelection">Hoje </a></li>
                    <li ><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="CalendarWeek dropSelection">Semana </a></li>
                    <li ><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="taskFullCalendar dropSelection"> Mês </a></li>
                </ul>
            </div>

Javascript

function trocatexto() {
    let $dropChildren = $('.dropSelection');
    let $option = $dropChildren.find('.dropSelection').text();
    $('.dropSelection').click(function () {
        $('.selectionCalendar').text($option);
    });
    }
2
  • 1
    "Não funcionou" no sentido de "nada aconteceu", ou aconteceu mais foi o texto errado, ou deu algum erro no console? Se a segunda opção, por qual texto foi substituído? E se a terceira, qual foi o erro no console?
    – Woss
    23/11/2017 às 21:54
  • nao funcionou no sentido completo, a lista some totalmente e fica so o texto 24/11/2017 às 12:23

1 Resposta 1

1

$( document ).ready(function() {
  $('.dropSelection').click(function () {
    let $dropChildren = $('.dropSelection');
    let $option = ($(this).text());
    $('.dropdown-toggle').text($option);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="btn-group col-xs-3 col-sm-3">
     <button type="button" class="selectionCalendar btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Calendario <span class="caret"></button>                 
     <ul class="selectionCalendar dropdown-menu box-white clearfix">
       <li><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="WeekToday dropSelection">Hoje </a></li>
       <li><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="CalendarWeek dropSelection">Semana </a></li>
       <li><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="taskFullCalendar dropSelection"> Mês </a></li>
     </ul>
 </div>

tome cuidado quando referenciar classes pois no seu HTML tem dois elementos com classe selectionCalendar. Isso faria trocar o texto dos dois elementos, ou seja, do <button type="button" class="selectionCalendar btn btn-primary dropdown-toggle" e também do <ul class="selectionCalendar dropdown-menu box-white clearfix" Veja no exemplo a seguir:

$( document ).ready(function() {
$('.dropSelection').click(function () {
    let $dropChildren = $('.dropSelection');
    let $option = ($(this).text());
    $('.selectionCalendar').text($option);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="btn-group col-xs-3 col-sm-3">
     <button type="button" class="selectionCalendar btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Calendario <span class="caret"></button>                 
     <ul class="selectionCalendar dropdown-menu box-white clearfix">
       <li><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="WeekToday dropSelection">Hoje </a></li>
       <li><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="CalendarWeek dropSelection">Semana </a></li>
       <li><i class="fa fa-calendar" aria-hidden="true"></i><a href="#" class="taskFullCalendar dropSelection"> Mês </a></li>
     </ul>
 </div>

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 .