replace text with another

Asked

Viewed 977 times

0

My doubt and the following, I have a Button and I want to exchange your text for the text of li (tag text <a>) subsequent. At first I made a script that did not work, my intention in short, is to exchange the text of the dropdown button with the text of the 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
  • 1

    "Did it not work" in the sense of "nothing happened", or did it happen more was the wrong text, or did it give some error in the console? If the second option, which text was replaced by? And if the third, what was the error in the console?

  • did not work in the full sense, the list completely disappears and gets only the text

1 answer

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>

take care when referencing classes because in your HTML you have two elements with class selectionCalendar. This would change the text of the two elements, ie <button type="button" class="selectionCalendar btn btn-primary dropdown-toggle" and also of <ul class="selectionCalendar dropdown-menu box-white clearfix" See in the following example:

$( 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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.