replace text with another

Question

replace text with another

Navigation

#1 by (0 votes)

0

My question is the following, I have a Button and I want to change your text with the text of the li (text of the <a> tags) subsequent. At first I made a script that did not work, my intention in short, is to change the text of the button dropdown by the text of li clicked.

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);
    });
    }

javascript jquery

asked by anonymous 23.11.2017 / 20:31

1 answer

Serial communication Arduino Script creating multiple divs

score 0 · Accepted Answer

$( 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><divclass="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>

Be careful when referencing classes because in your HTML there are two elements with class selectionCalendar . This would change the text of the two elements, that is, <button type="button" class="selectionCalendar btn btn-primary dropdown-toggle" and also <ul class="selectionCalendar dropdown-menu box-white clearfix" See the example below:

$( 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><divclass="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>