What is a promise in Javascript?

Question

Augusto Herbel

Asked: 2020-09-28 09:07:50 +0800 CST 2020-09-28 09:07:50 +0800 CST 2020-09-28 09:07:50 +0800 CST

Change text and color of a button with jQuery

772

I have these buttons, which I generate according to the number of records (that I bring from a database) with an ng-repeatAngularJS button, and I want them to turn green when I put the mouse over them (like the successbootstrap button) and that in instead of "Lost" say "Found". How could I do that with jQuery? I have already tried several other codes to see if they worked for me and they did not work.

The buttons:

And here I leave the part of the index.html where I generate the buttons:

<!-- MAIN CONTENT -->
    <div id="mainContent" class="container-fluid">
    <!-- aca hay 2 section más antes de la lista -->
<!-- LIST OF MISSING DOGS -->
                <section id="view"  class="row row-content" ng-controller="MainController">
                    <div class="col-xs-offset-3 col-xs-7 well">
                        <div class="col-xs-offset-3 col-xs-9">
                            <h1>View the list of Missing Dogs</h1>
                        </div>
                        <div class="col-xs-offset-2 col-xs-10">
                            <div class="form-group">
                                <label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
                                <div class="col-xs-8 col-xs-offset-1">
                                    <input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
                                </div>
                            </div>

                            <div class="col-xs-10">
                                <table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Race</th>
                                            <th>Description</th>
                                            <th>Place</th>
                                            <th>¿Found?</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="mascota in mascotas | filter: {raza : query}">
                                            <td>{{ mascota.nombre }}</td>
                                            <td>{{ mascota.raza }}</td>
                                            <td>{{ mascota.descripcion }}</td>
                                            <td>{{ mascota.lugar }}</td>
                                            <td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)"><span>Lost</span></button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
        </div>

EDIT: I add the code that didn't work for me, I think it's in JavaScript.

$(document).ready(function() {
    $('.btn').hover(function() {
            $(this).html('Found');
        }, function() {
            $(this).html('Lost'); 
        });
});

4 Answers

Voted

gugadev · Answer 1 · 2020-09-28T09:32:36+08:00

There are many ways to do that. I propose a dynamic alternative with data-hover. So, just specify the text you want to display in the hover.

jQuery

$('.btn.lost').hover(onHover, onLeave);

function onHover() {
  $(this).removeClass('lost');
  $(this).addClass('found');
  $(this).text($(this).attr('on-hover'));
}
function onLeave() {
  $(this).removeClass('found');
  $(this).addClass('lost');
  $(this).text($(this).attr('on-leave'));
}

.btn {
  border-radius: 2px;
  padding: .5rem .9rem;
}
.btn:focus {
  outline: none;
}
.btn.lost {
  background-color: #e74c3c;
  border: 1px solid #e74c3c;
  color: #fff;
}
.btn.found {
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <button class="btn lost" on-leave="Lost" on-hover="Found">Lost</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

AngularJS and CSS

Since you're using Angular, you can make use of ng-mouseoverand ng-mouseleaveto assign a class to it in these states. Likewise, to change the text you only need attributes data-and reference them through the CSS property content.

.btn {
  border-radius: 2px;
  padding: .5rem .9rem;
  position: relative;
}
.btn:focus {
  outline: none;
}
.btn.lost {
  background-color: #e74c3c;
  border: 1px solid #e74c3c;
  color: #fff;
}
.btn.lost:after {
  content: attr(on-leave);
}
.btn.found {
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
}
.btn.found:after {
  content: attr(on-hover);
}

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <button 
    class="btn lost"
    ng-class="{found: hover}" 
    ng-mouseenter="hover = true"
    ng-mouseleave="hover = false"
    on-hover="Found"
    on-leave="Lost"
  ></button>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

</body>
</html>

JuankGlezz · Answer 2 · 2020-09-28T09:28:21+08:00

I think this should work when overlaying the pointer:

$('.btn').on('mouseenter',function(){
  $(this).removeClass('btn-danger').addClass('btn-primary').find('span').text('found');
});

This works when exiting the pointer:

$('.btn').on('mouseleave',function(){
  $(this).removeClass('btn-primary').addClass('btn-danger').find('span').text('lost');
});

The first thing I do is edit the cssdel buttonand then change the name of the span.

I leave you an example working with jQuery:

$('.btn').on('mouseenter',function(){
      $(this).removeClass('btn-danger').addClass('btn-primary').find('span').text('found');
    });

    $('.btn').on('mouseleave',function(){
      $(this).removeClass('btn-primary').addClass('btn-danger').find('span').text('lost');
    });

button{
  width:75px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn btn-danger'><span>lost</span></button>
<button class='btn btn-danger'><span>lost</span></button>
<button class='btn btn-danger'><span>lost</span></button>

Juan Pinzón · Answer 3 · 2020-09-28T09:29:19+08:00

To achieve what you want to do, you can use the hover()jQuery function to capture the events when you mouse over the button and when you leave the button, what you have to do is generate a unique id for each button.

$(".btn-danger").hover(
  function() {
    $(this).css( "background-color", "#0f0");
    $( this ).text("Found");
  }, function() {
    $(this).css( "background-color", "#da4f49");
    $( this ).text("Lost");
  }
);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Boton</title>
</head>
<body>
<!-- MAIN CONTENT -->
    <div id="mainContent" class="container-fluid">
    <!-- aca hay 2 section más antes de la lista -->
<!-- LIST OF MISSING DOGS -->
                <section id="view"  class="row row-content" ng-controller="MainController">
                    <div class="col-xs-offset-3 col-xs-7 well">
                        <div class="col-xs-offset-3 col-xs-9">
                            <h1>View the list of Missing Dogs</h1>
                        </div>
                        <div class="col-xs-offset-2 col-xs-10">
                            <div class="form-group">
                                <label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
                                <div class="col-xs-8 col-xs-offset-1">
                                    <input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
                                </div>
                            </div>

                            <div class="col-xs-10">
                                <table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Race</th>
                                            <th>Description</th>
                                            <th>Place</th>
                                            <th>¿Found?</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="mascota in mascotas | filter: {raza : query}">
                                            <td>{{ mascota.nombre }}</td>
                                            <td>{{ mascota.raza }}</td>
                                            <td>{{ mascota.descripcion }}</td>
                                            <td>{{ mascota.lugar }}</td>
                                            <td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)" id="testbtn"><span>Lost</span></button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
        </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

  
</body>
</html>

As you can see I have added an id to the button in this case

id="testbtn"

You could make a unique id with the pet id and do something similar.

Alvaro Montoro · Answer 4 · 2020-09-28T10:30:10+08:00

You already have a few answers with JavaScript/jQuery, I'm going to give you one that only needs CSS without the need for anything else.

The idea is to use ::after(o ::before) to change the content of the button's text, and apply the colors from the .btn-success class when the mouse ( :hover) is hovered over the button:

.btn-danger span::after {
  content:"Lost";
}

.btn-danger:hover {
  color:#fff;
  background-color:#5cb85c !important;
  border-color:#4cae4c !important;
}

.btn-danger:hover span::after {
  content:"Found";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)"><span></span></button>

Detailed explanation ( as requested in the comments )

::afteris a pseudo-element that would correspond to a last virtual child that had the element to which it is added. Y is used to add content to the end of the selected element. The value you put in the property contentwill be the text that is displayed.

What this solution does is it removes the "Lost" and "Found" text in the HTML and then adds it via the pseudo-element ::after. In normal state the text will be "Lost":

.btn-danger span::after {
  content:"Lost";
}

Now when the mouse hovers over the button we want the text to change to "Found". For that we use the pseudo-class :hover, which is presented when the user puts the mouse over the element. In this case, when the user puts the mouse over the button btn-dangerwe want the ::aftervalue to change, so that is obtained by doing .btn-danger:hover span::after:

.btn-danger:hover span::after {
  content:"Found";
}

Finally, we also want to change the color of the button when the mouse is clicked on it and for that we also use the one already mentioned :hover(I have obtained the correct colors from the Bootstrap CSS):

.btn-danger:hover {
  color:#fff;
  background-color:#5cb85c !important;
  border-color:#4cae4c !important;
}

I hope I have explained it well. Tell me if you need help understanding something.

Change text and color of a button with jQuery

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?