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

Изменить текст и цвет кнопки с помощью jQuery

772

У меня есть эти кнопки, которые я генерирую в соответствии с количеством записей (которые я приношу из базы данных) с помощью ng-repeatкнопки AngularJS, и я хочу, чтобы они становились зелеными, когда я наводил на них указатель мыши (например, successкнопка начальной загрузки) и вместо этого из "Потеряно" сказать "Найдено". Как я мог сделать это с помощью jQuery? Я уже пробовал несколько других кодов, чтобы убедиться, что они работают у меня и не работают.

Кнопки:

И здесь я оставляю часть index.html, где я генерирую кнопки:

<!-- 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>

РЕДАКТИРОВАТЬ: я добавляю код, который у меня не работает, я думаю, что это в 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

Есть много способов сделать это. Я предлагаю динамическую альтернативу с data-hover. Итак, просто укажите текст, который вы хотите отобразить в файле 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>

Угловой JS и CSS

Поскольку вы используете Angular, вы можете использовать ng-mouseoverи ng-mouseleaveназначать ему класс в этих состояниях. Точно так же, чтобы изменить текст , вам нужны только атрибуты data-и ссылка на них через свойство CSS 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

Я думаю, что это должно работать при наложении указателя:

$('.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');
});

Первое, что я делаю, это редактирую cssdel , buttonа затем меняю имя файла span.

Я оставляю вам пример работы с 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

Чтобы достичь того, что вы хотите сделать, вы можете использовать hover()функцию jQuery для захвата событий, когда вы наводите указатель мыши на кнопку и когда вы оставляете кнопку, что вам нужно сделать, это создать уникальный идентификатор для каждой кнопки.

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

Как видите, в данном случае я добавил идентификатор кнопки.

id="testbtn"

Вы можете сделать уникальный идентификатор с идентификатором домашнего животного и сделать что-то подобное.

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

У вас уже есть несколько ответов с JavaScript/jQuery, я собираюсь дать вам один, который требует только CSS без необходимости чего-либо еще.

Идея состоит в том, чтобы использовать ::after(o ::before) для изменения содержимого текста кнопки и применять цвета из класса .btn-success при наведении мыши ( :hover) на кнопку:

.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>

Подробное объяснение ( по запросу в комментариях )

::afterявляется псевдоэлементом, который будет соответствовать последнему виртуальному потомку, имеющему элемент, к которому он добавлен. Y используется для добавления содержимого в конец выбранного элемента. Значение, которое вы поместите в свойство content, будет отображаемым текстом.

Что делает это решение, так это удаляет текст «Потерянный» и «Найденный» в HTML, а затем добавляет его через псевдоэлемент ::after. В обычном состоянии текст будет "Потерян":

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

Теперь, когда указатель мыши наводится на кнопку, мы хотим, чтобы текст изменился на «Найдено». Для этого мы используем псевдокласс :hover, который отображается, когда пользователь наводит указатель мыши на элемент. В этом случае, когда пользователь наводит указатель мыши на кнопку, btn-dangerмы хотим, чтобы ::afterзначение изменилось, поэтому это достигается следующим образом .btn-danger:hover span::after:

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

Наконец, мы также хотим изменить цвет кнопки при нажатии на нее мышью, и для этого мы также используем уже упомянутый :hover(я получил правильные цвета из Bootstrap CSS):

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

Надеюсь, я объяснил это хорошо. Скажи мне, если тебе нужна помощь, чтобы что-то понять.

Изменить текст и цвет кнопки с помощью 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?