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

我有这些按钮，我使用 AngularJS 按钮根据记录的数量（从数据库中获取）生成这些按钮，当我将鼠标放在它们（如引导按钮）ng-repeat上时，我希望它们变成绿色，而不是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>

AngularJS 和 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');
});

我做的第一件事是编辑cssdelbutton然后更改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 函数来捕获当您将鼠标悬停在按钮上以及离开按钮时的事件，您要做的就是为每个按钮生成一个唯一的 id。

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

id="testbtn"

您可以使用宠物 ID 创建一个唯一 ID 并执行类似操作。

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 中的“Lost”和“Found”文本，然后通过 pseudo-element 添加它::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?